Creating Dynamic Components in ReactJS: A Practical Tutorial

Introduction

ReactJS is one of the most popular JavaScript libraries for building dynamic and interactive user interfaces (UI). One of its key features is the ability to create components that adapt to various conditions. In this tutorial, we will explore how to create dynamic components in ReactJS with a practical approach.

1. What Are Dynamic Components?

Dynamic components in React are components that can change based on data or user interaction. For example, a component that displays a list of items that can be added or removed dynamically.

2. Prerequisites

Before starting, make sure you have:

• Node.js and npm (Node Package Manager) installed on your system.

• A React project created with Create React App or Vite.

If you don’t have a React project yet, you can create one using the following commands:

npx create-react-app my-dynamic-component
cd my-dynamic-component
npm start

Or using Vite:

npm create vite@latest my-dynamic-component --template react
cd my-dynamic-component
npm install
npm run dev

3. Creating a Dynamic Component

Let's create a simple dynamic component that displays a list of items that users can add or remove.

a. Creating the DynamicList Component

Create a new file named DynamicList.js inside the src/components folder and add the following code:

import { useState } from "react";

function DynamicList() {
  const [items, setItems] = useState([]);
  const [inputValue, setInputValue] = useState("");

  const addItem = () => {
    if (inputValue.trim()) {
      setItems([...items, inputValue]);
      setInputValue("");
    }
  };

  const removeItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h2>Dynamic List</h2>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Add an item"
      />
      <button onClick={addItem}>Add</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item} <button onClick={() => removeItem(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default DynamicList;

b. Using the DynamicList Component

Now, import and use DynamicList in App.js:

import DynamicList from "./components/DynamicList";

function App() {
  return (
    <div>
      <h1>Dynamic Components in React</h1>
      <DynamicList />
    </div>
  );
}

export default App;

4. Code Explanation

• useState([]) is used to store the list of items.

• useState("") is used to store the input value.

• addItem() adds an item to the list if the input is not empty.

• removeItem(index) removes an item based on its index.

• map() is used to render the list of items dynamically.

5. Conclusion

In this tutorial, we built a dynamic component in ReactJS that allows users to add and remove items from a list. By using useState, we efficiently manage data within the component.

You can further enhance this component by adding animations when items are added or removed using libraries like Framer Motion.