Convert React components String to JSX

Question

I have a string of React components .

//X.jsx
import "./x.css"
const X =({x}) =><div className={"x"} >{x}</div>

//Y.jsx
import "./y.css"
const Y =({y}) =><div className={"y"} >{y}</div>

`<X x={"x"}/> <Y x={"y"}/>`

I want to convert it to jsx how to do it ?

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) — J.Dario, Jun 06 '21 at 22:14
do u use a compiler like `babel`? Did you create your app with `npx create-react-app my-app`? — Sysix, Jun 06 '21 at 22:15
This sounds like an XY problem. Why do you have a string of Components? — pilchard, Jun 06 '21 at 22:28
But why do you have a string to begin with? You've declared some components, what situation is leading you to need to use a string to utilize them? — pilchard, Jun 06 '21 at 22:53
@pilchard I read [this](https://stackoverflow.com/questions/67845242/is-it-possible-to-create-a-dynamic-page-using-form-and-react-components) yesterday and I want to do about the same — Silicum Silium, Jun 06 '21 at 23:04
@Squanchy You mean this string is user input (from a textarea) and you want to display it back to them? Also to other users? Notice that JSX is basically JS code, you'd have to transpile and `eval` it. — Bergi, Jun 06 '21 at 23:12
@Bergi I don’t know if it’s right to use it. We need to think about it, but Thanks for the answer. — Silicum Silium, Jun 06 '21 at 23:26
@Squanchy The default answer would be that no, it's not right. `eval` is dangerous, and strings of code are bad. But we can't give more advice if you don't tell us more about what you are trying to achieve. — Bergi, Jun 06 '21 at 23:33
@Bergi here is a [link](https://codesandbox.io/s/nifty-lewin-rxdkt?file=/src/App.js:1592-1601) to an example what i want but i'm not sure about the JsxParser package. — Silicum Silium, Jun 13 '21 at 22:47

score -1 · Answer 1 · answered Jun 06 '21 at 22:41

I think the example you provided would inject the CSS declarations into the classname, no? That doesn't seem like what you want. Maybe consult this page and explore an avenue where you are importing the css in as a module to the given component and adding the relevant classname to it from the file.

Convert React components String to JSX

1 Answers1