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?

1. It helps you keep your components cleaner. So, you don't lose yourself in the component.
2. You can control all of your page structure in one place. So, you can change the layout easily.
3. 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.
4. You can implement JSON Schema Forms easily! You can even create pages from a Database.
5. 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.