Reactjs How to insert react component into string and then render

I just fixed this issue with react-jsx-parser

Your Example would be:

import JsxParser from 'react-jsx-parser'

export default class TagBox extends React.Component {
    render() {
       const sentence = "Hello guys this is <Tag>name</Tag>. How are you." // simply include the component in your string
        return(
            <JsxParser components={{ Tag }} jsx={ sentence } /> // identify the component in your string to inject
        )
    }
}

Have you heard of React String Replace ?

Here is a stateless component example:

import replace from 'react-string-replace';
const reg = /\{([a-z|A-Z|0-9|\.]+)\}/g;


const OutputComponent = props => {
    var str = 'Hello {name}, this is a "Super" component: {Super}';
    var output = replace(str, reg, prop => props.replacements[prop]);

    return <div>{output}</div>;
}

// later
import Super from './Super.jsx';
const obj = {
    Super: <Super />,
    name: 'John'
}

return <OutputComponent replacements={obj} />;

Okay, so assuming that's a string you have as input, you need to create an array.

var parts = str.split(/\{\{|\}\}/g); 
// => ["Hello guys this is ", "name", ". How are you."]

The odd items are literal strings, and the even parts are the stuff between the brackets.

Now we'll create a helper function called mapAlternate. Which takes a function to call for odd elements, and a function to call for even elements in our array.

function mapAlternate(array, fn1, fn2, thisArg) {
  var fn = fn1, output = [];
  for (var i=0; i<array.length; i++){
    output[i] = fn.call(thisArg, array[i], i, array);
    // toggle between the two functions
    fn = fn === fn1 ? fn2 : fn1;
  }
  return output;
}

Now we can do something like this in our component:

render: function(){
    var parts = str.split(/\{\{|\}\}/g);


    // render the values in <strong> tags
    var children = mapAlternate(parts, 
        function(x){ return <span>{x}</span>; }, 
        function(x){ return <strong>{x}</strong> });

   return <div>{children}</div>;
}

Which gives us: "Hello guys this is name. How are you."