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 element;

var jsxString = document.getElementById('textarea').value;

What is the process I would use to convert this on the client? Is it possible?

Answer 1

You can consider using the React attribute dangerouslySetInnerHTML:

class YourComponent{
  render() {
    someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></div>'
     
    return (
      <div className="Container" dangerouslySetInnerHTML={{__html: someHtml}}></div>
    )
  }
}

Answer 2

2023 answer update

Seem react-html-parser has no longer been maintained for a few years already. As pointed on the comment by Bill Keller, there is a library still actively maintained named html-react-parser. However, please read carefully on the Readme and make some considerations before using it in production. Like in this section Is this XSS safe?, if it is acceptable, then you are good to go.

Another alternative sounds more promising to me because it emphasizes "Safely" on their repo and home page. The library is named "Interweave". Please check the following repo for more detail about installation and usage: https://github.com/milesj/interweave/

2018 answer

Personally, I love to do it just like in the previous answer which recommends the usage of dangerouslySetInnerHTML property in JSX.

Just for an alternative, nowadays there is a library called react-html-parser. You can check it and install from NPM registry at this URL: https://www.npmjs.com/package/react-html-parser. Today's weekly download statistic for that package is 23,696. Looks a quite popular library to use. Even it looks more convenient to use, my self, still need more read and further consideration before really using it.

Code snippet copied from the NPM page:

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';

class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}

Answer 3

Here's how you can do it, without using dangerouslySetInnerHTML.

import React from "react";

let getNodes = str =>
  new DOMParser().parseFromString(str, "text/html").body.childNodes;
let createJSX = nodeArray => {
  return nodeArray.map(node => {
    let attributeObj = {};
    const {
      attributes,
      localName,
      childNodes,
      nodeValue
    } = node;
    if (attributes) {
      Array.from(attributes).forEach(attribute => {
        if (attribute.name === "style") {
          let styleAttributes = attribute.nodeValue.split(";");
          let styleObj = {};
          styleAttributes.forEach(attribute => {
            let [key, value] = attribute.split(":");
            styleObj[key] = value;
          });
          attributeObj[attribute.name] = styleObj;
        } else {
          attributeObj[attribute.name] = attribute.nodeValue;
        }
      });
    }
    return localName ?
      React.createElement(
        localName,
        attributeObj,
        childNodes && Array.isArray(Array.from(childNodes)) ?
        createJSX(Array.from(childNodes)) :
        []
      ) :
      nodeValue;
  });
};

export const StringToJSX = props => {
  return createJSX(Array.from(getNodes(props.domString)));
};

Import StringToJSX and pass the string in as props in the following format.

<StringToJSX domString={domString}/>

PS: I might have missed out on a few edge cases like attributes.

Answer 4

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 5

If you consider string

<div>Hello World</div>

If we are very strict, this actually is the valid JSX. The question is how to compile this JSX string into React code.

Easiest and the recommended way is to download some library like Babel and use it to transform the code. Babel can run in the Browser like the repl does.

It is also possible to transform JSX to other formats, but in this case you have to find a compiler or create one yourself.

The steps to create the JSX => React transformation yourself is:

1. transform the code string into AST representation
2. parse the AST and output code back to string

So you need somekind of AST parser like espree supporting JSX and then you can create a code which walks the AST tree and outputs something, like React -code out of it.

The AST tree of JSX data consists of normal JavaScript AST together with JSX nodes. The parser should walk through the tree and transform the JSX nodes into normal JavaScript code.

If you compile to React and encounter a JSX node with tag "div" you should compile that into React.createElement("div",... call with attributes and subnodes found under that AST node inserted as parameters of that call.

I have created a small AST Walker, which can process AST tree, ASTWalker, which can be used to transform the AST tree into some output format, like React or DOM.

On-line example of how to use it is here:

http://codepen.io/teroktolonen/pen/KzWVqx?editors=1010

The main code looks like this:

    // here is the JSX string to parse
    var codeStr = "<div>Hello world</div>";
    var walker = ASTWalker({
        defaultNamespace: "react",
    });
    // compile AST representation out of it.
    var rawAST = espree.parse(codeStr, {
          ecmaVersion: 6,
          sourceType: "script",
          // specify additional language features
          ecmaFeatures: {
            // enable JSX parsing
            jsx: true
          } 
        });

   // then you can walk the walk to create the code
   walker.startWalk( rawAST, {} );
   var code = walker.getCode();  
   console.log(code); 
   document.getElementById("sourceCode").innerHTML = code;

DISCLAIMER: The library is not intented for compiling into React. It is mostly used with defaultNamespace: "DOM", using it to compile into plain JavaScript + DOM representation. Trying anything more complicated than simple tags may result as an error.

The important thing is to notice that React is not only possible output format for JSX.

Answer 6

I've been using html-to-react with some success (self closing tags cause a problem though, but a fix is in the pull requests...) to parse markup strings as DOM like objects, and in turn React elements. It's not pretty, and if you can avoid it, do so. But it gets the job done.

html-to-react at github: https://github.com/mikenikles/html-to-react

Answer 7

Use React-JSX-Parser

You can use the React-JSX-Parser library dedicated for this.

npm install react-jsx-parser

here is the repo

Answer 8

html-react-parser is what you need.

import parse from 'html-react-parser';
import React from 'react';

export default function YourComponent() {
    someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></div>'
     
    return (
        <div className="Container">{parse(someHtml)}</div>
    )
}

Answer 9

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>

Answer 10

First you can change it to a non-string array and then use it as JSX

class ObjReplicate extends React.Component {
  constructor(props) {
    super(props);
    this.state = { myText: '' };
  }
  
  textChange=(e) =>{this.setState({ myText: e.target.value })};

  render() {
    const toShow = this.state.myText;
    var i=1;
    var allObjs=new Array;
    while (i<100){
      i++;
      allObjs[i] = <p>{toShow}</p>; //non-sting array to use  in JSX
   }
   
    return (
      <div>
        <input onChange={this.textChange}></input>
        {allObjs}
      </div>
   );
  }
}

ReactDOM.render(<ObjReplicate/>,document.getElementById('root'));

Answer 11

var jsxString = document.getElementById('textarea').value;
return <>{jsxString}</>;

Answer 12

None of the answers allow you to maintain the capitalization of React components, in other words, just like with dangerouslySetInnerHTML, whenever the string is rendered, ExampleComponent becomes examplecomponent (in lower case).

Improving on TheBotlyNoob's answer, you can circumvent that by using html-react-parser and then replacing all lowercased React components. It's even more fluid as it allows you to define additional custom attributes on the replacement component, as well as preserve the component's children. For example:

import parse, { domToReact } from 'html-react-parser';
import SomeComponent from 'some-component';

...
const options = {
    replace: ({ attribs, children }) => {  
      if (!attribs) {
        return;
      }
      if (attribs.class === 'replace') {
        return <SomeComponent someAttribute="" className="anyClass">{domToReact(children, options)}</SomeComponent>
      }
    }
};

...
<div>
  {parse(dynamicHTML, options)}
</div>

Answer 13

You need to use babel with preset react

npm install --save-dev babel-cli babel-preset-react

Add the following line to your .babelrc file:

{
  "presets": ["react"]
}

Then run

./node_modules/.bin/babel script.js --out-file script-compiled.js

You can find more info here