How to Add Dynamic Components in React

MD Aminul Islam Feb 02, 2024
How to Add Dynamic Components in React

For any React application, it is very common to use dynamic elements. The most exciting feature of dynamic elements is that the user does not need to refresh the webpage to see any changes.

For example, if you need more than one input field, you can easily create a new input field by clicking a button.

In this brief article, we will see how we can include dynamic elements in React JS, and we will discuss the topic by using necessary examples and explanations to make the topic easier.

Add Dynamic Components in React

To add dynamic elements for a web application, we need to create a separate JS file with the basic components like the below,

Code - App.js:

import react from 'react';

class DynamicComponent extends react.Component {
  constructor() {
    super() {
      this.state = { addNew: [{}] }
    }
  }
  addLine() {
    this.setState(({addNew: [...this.state.addNew, {}]}))
  }
  render() {
        return(
            <div>
                <center>
                    {this.state.addNew.map(()=>(
                        <h2>This is a dynamic text</h2>
                    ))}
                    <button onClick={()=>this.addLine()}>Add new</button>
                </center>
            </div>
        )
    }
  }
  export default DynamicComponent;

We first imported the necessary files and packages for our application in the above example file. Then we create a class that extends to react.Component.

Now let’s discuss the important parts of the class structure. First, the class constructor() contains the super(), where we define the array of stats.

The a function named addLine() that will initiate each elements. Lastly, we have the render() function, which will organize the whole User Interface, and inside this function, we created a map() to map the state and define the code that needs to be implemented dynamically.

After that, we create a button element, and the onclick event of the function is addLine().

Let’s look at our index.js file, and this file requires some changes as follows.

Code - index.js:

import './index.css';

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';
import DynamicComponent from './component';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DynamicComponent />
  </React.StrictMode>
);
reportWebVitals();

After importing the JS file in the above JS file, we just passed the class. You’ll get the output below in your console when you run the above example.

Output:

react dynamically add component

The example codes shared in this article are written in React JS project. Your system must contain the latest version of Node JS to run a React project.

MD Aminul Islam avatar MD Aminul Islam avatar

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

LinkedIn

Related Article - React Component