Render as string, from JSX as raw string

[GuyoST]

Hello every one,

I'm new here and I found out preact, and this page : https://github.com/preactjs/preact-render-to-string to render a component as string.

If we start from the example on this page, with the box and the fox, my question is.
Let's suppose we have a JSX file that contains the component :

// Classical components work
class Fox extends Component {
	render({ name }) {
		return <span class="fox">{name}</span>;
	}
}

// ... and so do pure functional components:
const Box = ({ type, children }) => (
	<div class={`box box-${type}`}>{children}</div>
);

Then how would it be possible to render a component of this file, for example, same as the example :

let html = render(
	<Box type="open">
		<Fox name="Finn" />
	</Box>
);

I tried to do something with html-react-parser to parse JSX code but then I don't know what to do with the parsed JSX...
I feel i'm wrong doing this...

But can someone help me about it ?

My goal with that : allow a user to type JSX on a webpage, and render a component dynamically (static component, no interaction).

Thank you for your help (and I hope i'm at the good place to ask this question :) )

[rschristian]

Do you mean that you don't know what to do with the result of preact-render-to-string once you have it?

One use is dangerouslySetInnerHTML -- please take note of the name, this is dangerous! You should sanitize input.

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

// Produces `<div><h1>Hello World!</h1></div>`
const MyComponent = () => <div dangerouslySetInnerHTML={{ __html: exampleHTMLString }} />

Here's a little extension to your example