CODEWITHSUNDEEP
javascriptreactjs
Bernard Doci
Bernard Doci

Reputation: 769

How to convert string to jsx?

How can I convert this string to jsx? I want this string to appear as an HTML element.

this.setState({
    input: "<h1 id="heading">Heading</h1> <h2 id="sub-heading">Sub-heading</h2> <h3 id="another-deeper-heading">Another deeper heading</h3>"
});

render() {
    return <div>{this.state.input}</div>
}

Upvotes: 1

Views: 4034

Answers (2)

Beyers
Beyers

Reputation: 21

Just to highlight the solution, the comment by @user633183:

Use dangerouslySetInnerHTML

Documentation link

Upvotes: 0

Laizer
Laizer

Reputation: 6150

You don't need to quote HTML elements in JSX, but an HTML element can only have one parent. Get rid of the quotes, and move the div up to the variable, and you'll be all set.

So:

this.setState({
   input: <div><h1 id="heading">Heading</h1> <h2 id="sub-heading">Sub-heading</h2> <h3 id="another-deeper-heading">Another deeper heading</h3></div>
});

render() {
    return this.state.input
}

I'm not sure what you gain from this, though. Best practice would be to keep simple data in props and state, and put the HTML wrapper in the render function, not in state.

Upvotes: 2

Related Questions