How to render jsx stored as a string in ReactJS

Question

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>'

dangerouslySetInnerHTML is the way to do this. Please show how you're trying to do that — Jayce444
– Jayce444, Commented May 10, 2020 at 13:12
Does this answer your question? How to render a string with JSX in React — Panther
– Panther, Commented May 10, 2020 at 13:15
@jayce444 " <div dangerouslySetInnerHTML={{__html: str}}></div> );" — Deepak
– Deepak, Commented May 10, 2020 at 13:23

Deepak · Accepted Answer · 2020-05-17 14:06:55Z

2

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.

answered May 17, 2020 at 14:06

Deepak

414 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render jsx stored as a string in ReactJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related