Search code examples
reactjsevalrender

How to render jsx stored as a string in ReactJS

I am trying to build a react app with customized components. The input to the app is a jsx(as a string) coming from an API. Now i want to render this input jsx (a string variable), but not able to do that. I have tried eval() and dangerouslySetInnerHTML options, but it did not work out. My JSX String looks like

'<div> <MyComponent attr_1={this.state.array["field"]}></MyComponent> </div>'

Solution

  • Hi I figured out JsxParser is the right way of solving my problem. react-jsx-parser provides capability to parser and render react component from JSX string.