Convert a string to a react component

Question

I have a string that's a react component coming back from an API request. Unfortunately, I have no control over how the data gets returned, so it comes back like

`<Sphere><meshBasicMaterial attach='material' color='pink' /></Sphere>`

All I want to do is be able to render the above in a react component, but because it's a string I can't. Ideally, without using any external libraries to convert it.

Am I missing something simple here? Any information helps!

// string = "<Sphere><meshBasicMaterial attach='material' color='pink' /></Sphere>"

function Scene({string}) {

  // const MyComponent = string

  const MyComponent = () => { return (string) }

  return (
    <>
      <Canvas>
        <MyComponent />
      </Canvas>
    </>
  )
}

Note - I stumbled upon this StackOverflow question, but is not a solution in my case due to extensive non-HTML tags.

Does this answer your question? [How do I convert a string to jsx?](https://stackoverflow.com/questions/36104302/how-do-i-convert-a-string-to-jsx) — Ahmet Emre Kilinc, Apr 30 '21 at 18:54
@AhmetEmreKılınç I found those solutions, but unfortunately doesn't help because I'm trying to render a react component and not HTML as a string. — Nic, Apr 30 '21 at 21:28

Christian Fritz · Answer 1 · 2021-04-30T19:06:33.443

2

Browsers don't understand jsx, so you'll need to compile it somehow. Normally that is done on the server, but if you need to do it on the client then you can use the Babel standalone js bundle: https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx

Note: since your string contains non-HTML tags, using dangerouslySetInnerHTML is not a solution in your case. Also note that you may still need to import the components mentioned in the string (in the example, the Sphere component).

edited Apr 30 '21 at 19:06

answered Apr 30 '21 at 18:57

Christian Fritz

20,641
3
42
71

My application is built using Meteor & React. Currently, all the components are rendered client side. I suppose I can reconfigure the application to SSR. – Nic May 01 '21 at 16:57
Meteor, good. I happen to know Meteor pretty well. And no, we are talking about different things here. Yes, the react templates are rendered client side, but the JSX is translated into "pure" react code server-side. SSR would be if all the client would get was a static HTML file that already has all the data filled in as well. – Christian Fritz May 01 '21 at 20:47
Right - I'm following. I found react-live that takes in react code and provides an editor as well as displays your code. This is what I was looking for . React-live uses Buble as opposed to Babel for transpiling, but it's lightning-fast and light-weight so I'm good with it. Thanks for your wisdom, Christian! – Nic May 05 '21 at 14:41

score 0 · Answer 2 · edited Apr 30 '21 at 19:08

0

Please follow the below example, basically, you need to evaluate string to element, we can use dangerouslySetInnerHTML.

const htmlStringElem = '<h1>Hello World!</h1>';

const App = () => (
  <div dangerouslySetInnerHTML={{ __html: htmlStringElem }} />
);

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

edited Apr 30 '21 at 19:08

T J

42,762
13
83
138

answered Apr 30 '21 at 18:56

Sarvesh Mahajan

914
7
16

1

please see running code in codesandbox: https://codesandbox.io/s/dangerouslysetinnerhtml-forked-gqgz2?file=/index.js – Sarvesh Mahajan Apr 30 '21 at 18:59
This is not a solution if you have non-HTML tags. – Nic May 01 '21 at 16:59

score 0 · Answer 3 · answered May 01 '21 at 17:08

Since you are working with React, you can use Parse.

import parse from "html-react-parser";


const App = () => (
   {parse(<Sphere><meshBasicMaterial attach='material' color='pink' /></Sphere>)}

);

ReactDOM.render(<App />, document.body);

This is an easy and safe way to achieve this.

Convert a string to a react component

3 Answers3