Dynamic Component Generation in React! Creating A Page with JSON!
How create a component dynamically? How to make a component generic? How to render a component from props? How to create a page from JSON? How to…?
Most of us know how to make a component with JSX syntax. This is very simple once you have learned how React works and what JSX is. Sometimes we need to create a component dynamically, although not very often.
For simple pages, we can create a structure to render the page dynamically. Even we can use this structure for forms.
We can do something like in the example below.
...
if(type === "text")
return <Textfield/>
if(type === "select")
return <Select/>
if(type === "Text">
return <Text/>
...
But that will be looked ugly and complicated. We can make it a smarter way!
React has a basic function called “createElement” which creates react elements from components you have.
React.createElement(YourComponent, {...propsForYourComponent});
This is how we create a component dynamically but it doesn’t seem so dynamic, does it?
We need to make a collection of the components that we will use on the page.
const elements = {
Textfield,
Text
...
}...
return (
<>
{React.createElement(elements.Textfield, {...props})}
{React.createElement(elements.Text, {...props})}
...
</>
)
We need to prepare the body in a more dynamic way.
React.createElement(elements["Textfield"], {...props});
It is ok but we can make a component that creates elements by props.
const Element = ({type, props}) => {
return React.createElement(elements["Textfield"], props);
}
Now, we have a component that can create the elements with props and this allows you to create a page dynamically.
What does that mean?
This means you can create your simple pages with a single JSON!
const page = [
{
type: "Header",
},
{
type: "Textfield",
props: {
label: "Simple Textfield",
placeholder: "Simple placeholder",
}
},
{
type: "Selectfield",
props: {
label: "Simple Selectfield",
options: [
{
value: "opt1",
label: "Option1",
}
]
}
}
]
You can map your page array in your pages. Let’s see this in an example.
In the example, there are:
- A simple UI component sets,
- An array that has the page structure,
- Element component which creates the components dynamically,
- Page component which creates the pages dynamically
In 4 steps, we made a dynamic page generator. This is how easy it is!
Why should I do that?
- It helps you keep your components cleaner. So, you don't lose yourself in the component.
- You can control all of your page structure in one place. So, you can change the layout easily.
- If you use a third-party UI library, you can easily change it. All you need to is change the imports and adapt the components to the new UI library.
- You can implement JSON Schema Forms easily! You can even create pages from a Database.
- It helps in keeping the look of your pages similar.
Thanks for your attention! I hope it was helpful to you. You may be learned something new or got a new idea. Please, I would be very happy if you leave your thoughts in the comments.