How do I convert a string to jsx?

Question

How would I take a string, and convert it to jsx? For example, if I bring in a string from a textarea, how could I convert it to a React

Answer 1

I came across this answer recently and, it was a good deal for me. You don't need to provide a string. Returning an array of JSX elements will do the trick.

We can store JSX elements in JavaScript array.

let arrUsers = [<li>Steve</li>,<li>Bob</li>,<li>Michael</li>];

and in your HTML (JSX) bind it like,

<ul>{arrUsers}</ul>

As simple as it is.

Answer 2

Here's a little utility component for this:

const RawHtml = ({ children="", tag: Tag = 'div', ...props }) =>
  <Tag { ...props } dangerouslySetInnerHTML={{ __html: children }}/>;

Sample usage:

<RawHtml tag={'span'} style={{'font-weight':'bold'}}>
  {"Lorem<br/>ipsum"}
</RawHtml>