How to render a react template? - reactjs

Question

I'm creating a web app that serves the user unique pages with a substantial amount of JSX e.g.
<Explanation>
<p>Here will be a lengthy section explaining how to solve a problem that I want rendered using the explanation component</p>
<Quote>It might also have child components in it</Quote>
</Explanation>
<Questions>Here will be some questions I've written</Questions>
<Image> Here will be an image that I want to render using my image component</Image>
Ideally I would like to store the JSX in a mongo database as an object like this:
post = {
_id: 1,
content: `<Explanation>
<p>Here will be a lengthy section explaining how to solve a problem that I want rendered using the explanation component</p>
<Quote>It might also have child components in it</Quote>
</Explanation>
<Questions>Here will be some questions I've written</Questions>
<Image> Here will be an image that I want to render using my image component</Image>`
because I will have many hundreds of such pages and the user should receive only a particular page.
Is there a way I can achieve this?
At the moment I have resigned to writing an object like this:
post = {
_id,
content: [
{component: Explanation,
props: {key: 'bla'},
content: [
{component: p,
props: null,
content: 'Here will be a lengthy section explaining how to solve a problem that I want rendered using the explanation component'
}
]
}
]
and then writing a function that turns them into React elements like so:
const renderPost = (post) => {
const JSX = post.content.map(c =>
React.createElement(c.component, c.props, c.content)
)
return JSX
}
but this whole process feels cumbersome and inefficient.
Is there a better way of trying to achieve my goal?

Answer 1

This is a quick work around.
import React from "react";
import "./styles.css";
var str = `
<Explanation>
<p>this is ex1 p tag</p>
<Quote>this is quote</Quote>
</Explanation>
<Questions>This is q</Questions>
<Image>this is img</Image>
`;
const createMarkup = (props) => ({ __html: props });
const Custom = ({ children }) => {
return <div dangerouslySetInnerHTML={createMarkup(children)} />;
};
const Quote = ({ children }) => {
return <blockquote dangerouslySetInnerHTML={createMarkup(children)} />;
};
const Questions = ({ children }) => {
return <q dangerouslySetInnerHTML={createMarkup(children)} />;
};
const Image = ({ children }) => {
return <h1 dangerouslySetInnerHTML={createMarkup(children)} />;
};
const Explanation = ({ children }) => {
return (
<div className="explain" dangerouslySetInnerHTML={createMarkup(children)} />
);
};
const cpmponentToShow = [];
const components = {
Custom,
Explanation,
Image,
Questions,
Quote
};
const componetCreate = (string) => {
const tags = string.match(/(?<=<)((\w|\b)+)[^>]/g);
if (tags.length) {
tags.map((tag) => {
var regexNew = `<${tag}>([\\s\\S]*?)</${tag}>`;
var matched = string.match(regexNew);
const leftOver = matched[1].match(/(?<=<)(\w+)[^>]/g);
if (!leftOver) {
cpmponentToShow.push(
React.createElement(
components[tag] ? components[tag] : tag,
null,
matched[1]
)
);
}
return null;
});
}
};
componetCreate(str);
export default function App() {
return (
<div className="App">
{cpmponentToShow.map((item, index) => (
<React.Fragment key={index}>{item}</React.Fragment>
))}
</div>
);
}
p {
color: red;
}
blockquote {
color: black;
}
q {
color: purple;
}
h1 {
color: royalblue;
}
.explain {
color: salmon;
}
sandbox link