How do I convert html with jsx to jsx in React.js

Question

I want to have an API with returns HTML with JSX. When the HTML is loaded, I want to convert this to JSX and pass the props from my

Given this set of code:

import { renderToString } from "react-dom/server";
import ReactDOM from 'react-dom';

function MyHtml (props) {
    var apiHtml = renderToString("<div>{this.props.title}</div>");
    return (
        <div dangerouslySetInnerHTML={{ __html:  apiHtml }} />
    )
}
export default MyHtml;
ReactDOM.render(
    <MyHtml title="test"/>,
    document.getElementById('test')
);

I want to have the output

<div>test</div>

Instead, I get

<div>{this.props.title}</div>

Thanks

JSX just get's transpiled to actual js code when it's built with webpack. To create components from a string dynamically you should look @ the react top-level api (Specifically React.createElement). See reactjs.org/docs/react-without-jsx.html — ZombieTfk
– ZombieTfk, Commented Jun 22, 2018 at 12:05

Colin Burke · Accepted Answer · 2018-06-22 12:09:11Z

1

I think what you're looking for is:

var apiHtml = renderToString(`<div>{${this.props.title}}</div>`);

Using template literals to fill in the code you want.

answered Jun 22, 2018 at 12:09

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

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

Comments

James Hanson · Accepted Answer · 2018-06-22 15:23:04Z

0

I ended up doing something like this:

var { title } = this.props; // => testing
var html = ReactDOMServer.renderToString("<div>${title}</div>");
var toRender = eval('`'+html +'`');

To give the output:

<div>testing</div>

Thanks everyone!

answered Jun 22, 2018 at 15:23

James Hanson

215 bronze badges

Collectives™ on Stack Overflow

How do I convert html with jsx to jsx in React.js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related