Is it possible to take HTML/JSX content from an external source and render it in dynamically in React? In our case we want to take content from the Wordpress API and render it on both the client and the server (we're using NextJS)

So, the Wordpress API returns a JSON response which includes a content property which is a string of HTML/JSX. the content would look something like this.

{
    content: "<div><Slider imageCount="5" galleryID="1"></Slider><span>This is an image gallery</span></div>"
}

So, as you can see it would be a mix of HTML and React ponents/JSX, represented as a string

I would use Axios to make a call to get the content (on both server and client using NextJS's getInitialProps() method), then I need to render it, but i'm new to react and I can see a couple of problems.

1) In React, JSX is piled at build time, not run time, I can't see how to get round this (It would have been easy in Angular using $pile service for example).

2) As we don't know what ponents the content from Wordpress is going to use, we'd have to import every single one of them at the top of the page, the content may include a ponent or it may include a ponent, who knows?.

Right now, I'm thinking this isn't possible, which would mean we'd have to reconsider using React, but I'm really hoping somebody has an answer.

Any help would really be appreciated.

Is it possible to take HTML/JSX content from an external source and render it in dynamically in React? In our case we want to take content from the Wordpress API and render it on both the client and the server (we're using NextJS)

So, the Wordpress API returns a JSON response which includes a content property which is a string of HTML/JSX. the content would look something like this.

{
    content: "<div><Slider imageCount="5" galleryID="1"></Slider><span>This is an image gallery</span></div>"
}

So, as you can see it would be a mix of HTML and React ponents/JSX, represented as a string

I would use Axios to make a call to get the content (on both server and client using NextJS's getInitialProps() method), then I need to render it, but i'm new to react and I can see a couple of problems.

1) In React, JSX is piled at build time, not run time, I can't see how to get round this (It would have been easy in Angular using $pile service for example).

2) As we don't know what ponents the content from Wordpress is going to use, we'd have to import every single one of them at the top of the page, the content may include a ponent or it may include a ponent, who knows?.

Right now, I'm thinking this isn't possible, which would mean we'd have to reconsider using React, but I'm really hoping somebody has an answer.

Any help would really be appreciated.

• javascript
• reactjs
• next.js
• wp-api

• You could maybe parse the string (with a regex matching only tags with capitals) to detect the classes used in it, and then replace those parts (<Slider ... </Slider>) with the rendered react, and then use dangerouslySetInnerHtml. Does it make sense ? – ChrisR Commented Jul 26, 2018 at 13:57
• It makes sense, it's the middle bit "replace those parts with the rendered react" that I'm not sure how to do. Where would I do this? – jonhobbs Commented Jul 26, 2018 at 14:15
• Why instead of fetching a string that might contain JSX, you can "build" the string on save, and when fetching you will need only the bundle that is the output of that "build", using import('url-to-bundle'), and then render it with React. – felixmosh Commented Feb 19, 2019 at 20:46
• while not exactly what the OP is asking, if your looking to dynamically render react ponents from a seperate bundle at runtime, checkout my answer here stackoverflow./a/61823689/800619 – NSjonas Commented May 15, 2020 at 16:14

3 Answers 3

Interesting problem!

You should try react-jsx-parser. I think it solves your problems. Not sure how it works with Next JS - I have no experience with Next JS.

Check out this sandbox:

You are right about all the ponents getting bundled. There is a workaround for that. :)

Check out this sandbox:

I've created a dynamicComponent that expects an import promise and returns a ponent.

I changed the way A, B and C ponents are imported in index.js. This way each dynamically imported ponent gets a separate bundle and is only requested when needed.

This should solve your second problem.

You can refer to the below link

https://reactjs/docs/dom-elements.html#dangerouslysetinnerhtml

For the React Components part you can render an Static HTML Markup string using

https://reactjs/docs/react-dom-server.html#rendertostaticmarkup

But be sure that the html you get is from an authentic source and will not contain any malicious scripts

You can Render external HTML/React ponents dynamically in React like this, simply in these quotation , content: `<div>${<Slider imageCount="5" galleryID="1"></Slider>}<span>This is an image gallery</span></div>

ends with these ` sign.