How to Show and Read Dynamic List Data in React 18

Last Updated on by in React JS

In this guide, you will learn how to build a dynamic list, read values and display it through the functional component on the browser in React js application.

A dynamic list is a formidable one that can dynamically change its content during runtime. It is a list that can be updated, modified or edited during the lifecycle of an application.

This list type is commonly used in modern web applications to display data that can change frequently, such as user-generated content, chat messages, notifications, and more.

In the context of a React application, a dynamic list is often created using the map() method to iterate over an array of data and render a list item for each item in the array.

The list can be dynamically modified and re-rendered by updating the array to reflect the changes.

Dynamic lists are important in web development because they provide a more interactive and responsive user experience, allowing users to see changes to data in real time without having to refresh the page.

They are also powerful tool for displaying and managing large amounts of data in a structured and organized way.

React Js Read and Display Dynamic List Data Example

  • Step 1: Install React Project
  • Step 2: Add External Dependencies
  • Step 3: Create Function Component
  • Step 4: Read Dynamic List Values
  • Step 5: Update App.js Component
  • Step 6: Run React Server

Install React Project

We have the prime purpose of reading list items dynamically in React. Hence, we will build a new React project using the given command.

npx create-react-app my-react-app

Navigate to the project folder using `cd` command followed by project name:

cd my-react-app

Add External Dependencies

We need certain packages to build the desired functionality; execute the following command to add the axios and bootstrap packages.

npm install axios bootstrap --legacy-peer-deps

Create Function Component

A function component is a normal JavaScript function that holds the code to solve a particular problem.

Create a new folder by the name of components; after that create the new Users.js file then place the following code within the file.

import React from 'react'

function Users() {
  return (
    <div></div>
  )
}

export default Users

Read Dynamic List Values

You have to open the components/Users.js then in this file you have to put the following code.

import React, { useState, useEffect } from "react";
import axios from "axios";

function Users() {
  const Endpoint = "https://jsonplaceholder.typicode.com/users";

  const [userData, setUserData] = useState([]);

  const getUserData = async () => {
    try {
      const fetchData = await axios.get(Endpoint, {
        headers: {
          authorization: "Bearer JWT Token",
        },
      });
      setUserData(fetchData.data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    window.addEventListener("load", getUserData);
    console.log(userData);
    return () => {
      window.removeEventListener("load", getUserData);
    };
  }, [userData]);

  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Read Dynamic List Values Example</h2>
      {userData.map((item) => {
        return (
          <li className="card p-3 mb-2" key={item.id}>
            <div className="card-body">
              <p className="card-text">{item.username}</p>
            </div>
          </li>
        );
      })}
    </div>
  );
}

export default Users;

Update App.js Component

We are going to import the Users component in the App.js file; make sure to import and use the component as given below in the main component file.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import Users from './components/Users.js'

function App() {
  return (
    <div>
      <Users />
    </div>
  )
}

export default App;

Run React Server

Start the React server by running the following command:

npm start

Finally, your react development server will start the react app on:

http://localhost:3000

How to Show and Read Dynamic List Data in React Js

Conclusion

In this tutorial, we have learned how to display dynamic list values in React js. We also showed you how to read list values using the map() array method in React.

In JavaScript, map() is a higher-order function that allows you to apply a function to each element of an array and return a new array with the results.