How to Dynamically Create Divs and Lists in React with Buttons and Inputs

Learn how to create dynamic divs and lists in React using input fields and buttons. Master React state management with step-by-step examples for beginners and experienced developers alike.
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Creating div in function (React)

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Creating Dynamic Divs and Lists in React

When working with React, it’s common to build interactive user interfaces that rely on user input. One frequent exercise is dynamically creating elements such as <div>s or list items (<li>) based on input values. In this post, we'll explore how to accomplish this with buttons and input fields using React hooks like useState.

The Problem Statement

You may encounter scenarios where you want to take user input and display it on the screen, updating the display only when the user clicks a button. For instance, you want to:

Take input from a text field.

When a button is clicked, create a <div> that shows the input text.

If the input text changes, it should only update when the button is clicked again.

Additionally, we’ll expand this exercise to create a list. Each click will add a new list item containing the input text below the button.

Initial Setup

Before diving into the solutions, let’s review the basis of what we'll be working with. React’s useState is essential for managing component state, allowing us to keep track of input values and render them conditionally.

Creating a Simple Div

Let’s first create a component that will display the text input as a <div> once the button is clicked.

Step 1: Basic Input and Display Functionality

Here’s how to set up the initial React component:

[[See Video to Reveal this Text or Code Snippet]]

Explanation:

initialValue: Holds the current input value from the text field.

displayText: Controls whether the <div> with the user's input is shown.

showText: This function is called when the button is clicked. It sets the displayText state to true and updates the Value with initialValue.

Step 2: Creating a Dynamic List

Now let’s extend our functionality to create a list. Each time the button is clicked, we will add a new list item based on the current input.

Here’s the updated code:

[[See Video to Reveal this Text or Code Snippet]]

Key Changes:

We replaced Value with an array that holds all the input values.

Each time the button is clicked, we add the current input value to the list using the spread operator.

We reset the input field by clearing initialValue after adding the value to the list.

Conclusion

In this guide, we demonstrated how to dynamically create div elements and lists in React based on user input. By using React’s state management capabilities with the useState hook, we can create interactive and user-friendly components.

Whether you're just getting started with React or looking to refine your skills, understanding how to handle state and events will significantly enhance your web development efforts.

Happy coding!