• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to secondary sidebar

CodingStatus

- Level Up Your Status with Coding Expertise!

  • Tutorials
    • React Js Tutorials
    • JavaScript Tutorials
    • PHP Tutorials
    • HTML Tutorials
    • SQL Tutorials
    • Laravel Tutorials
  • Snippets
    • React Js Code Snippets
    • Ajax Code Snippets
    • Node.js Code Snippets
    • JavaScript Code Snippets
    • jQuery Code Snippets
    • SQL Code Snippets
  • Programs
    • PHP Program
    • Python Programs
    • Java Programs
  • How To
    • React Js How To
    • Node Js How To
    • Ajax How To
    • PHP How To
    • jQuery How To
    • JavaScript How to
  • Scripts
    • PHP Script
    • Js Script
    • React Js Script
    • JQuery Script
  • Projects
    • PHP Project
  • Interview Questions
  • Guide
  • API Integration
  • Installation

React Lists

November 27, 2021 By Md Nurullah

If you need to handle the largest arrays & objects in React js, Then you will have to learn React Lists. Here I have explained concepts of the list step by step with some examples. So, read this complete article carefully.

Once you complete this article, You will definitely understand, How to build collections of Arrays & an array of objects and render them with JSX in React js.

Learn Also –

How to display images in react js

Create Charts in React Js

How to use CSS in react js

How to use bootstrap in react js

Table of Contents

  • Lists in React Js
    • Lists of An Array
    • Lists of An Object
    • Lists of An Array & Object
    • Lists of Nested array & objects
  • Key is required for React Lists
  • Steps to create Lists in React Js
    • 1. Create React App
    • 2. Create lists within a component
    • 3. Render a Component to the DOM
    •  4. Run React App
  • What’s Next?

Lists in React Js

The Lists are very useful in React Js to render elements of an array & objects dynamically or statically. Even It is frequently used to access dynamic data that comes from the database & the API.

To Implement Lists, We mainly use the map() function of core javascript. So, You should have at least a basic understanding of this function. If You don’t have then you can understand its basic concept from the next steps.

map() function

The map() function creates a new array by accessing or modifying each element of another array.

Syntax –

arrayObject.map(function(arrayElement, arrayIndex, arrayobject){}, thisValue);

Here map() function accepts two parameters first is a callback function and the second is thisValue

The callback function accepts the following three parameters –

  • arrayElement – It accepts the value of an array object
  • arrayIndex – It accepts the index of an array object.
  • arrayobject – It accepts the whole array object

The map() function –

  • is used to create a new array with each element of another array.
  • does not work for an empty array.
  • does not change the original array.
  • can handle large & complex data of an array & array object

React Lists with Map() Function

In case of List, You can create collections of an array elements and access them within the JSX using curly bracket {}.

We mostly used the following syntax of map() function for implementing react lists –

array.map(callback);

callback – It may be Regular function or Arrow function like –

  • Regular Function – function(currentElement){}
  • Array Function – (currentElement) = > {}

Example – 1

Suppose,  We have store names of developers in an array to display them in a list

let developerName =["Noor Khan", "Rapsan Jani", " Preeti Ranjan", "Sunil Kumar"];

Now, In Developer component, We can display each element of the above array in the list using map() function like –

function Developer(){

let developerName = ["Noor Khan", "Amit Kumar", "Sunil Kumar", " Monika Singh"];

let developerNameList = developerName.map((fullName) =>{
 return <li>{fullName}</li>
});
return <ul>{developerNameList}</ul>
}

Example – 2

Suppose, We need to add 10 to each element of the following array

let arr = [20, 30, 15, 80, 140];

We can implement the above example within NewNum component like

function NewNum(){
let arr = [20, 30, 15, 80, 140];
let newArr = arr.map((element) =>{
 return <li>{element + 10}</li>
});
return <ul>{newArr}</ul>
}

Now, Let’s understand the list in a better way from the next steps.

Lists of An Array

In the case of Lists of Array, We will create lists for only a simple &  complex array that contains any type of data like strings, numbers & more.

Example –

function NumList(){
let arr = [10, 50, 80, 110];
let newArr = arr.map((num) =>{
 return <li>{num}</li>
});
return <ul>{num}</ul>
}

Lists of An Object

In the case of Lists of Object, You can create lists for only a simple &  complex object that contains any type of data like strings, numbers & more. But you will have to use  Object.keys() method to convert an object into an array. Because map()  works for only an array for creating lists.

Example –

function Developer(){

let developerInfo ={
  fullName:"Noor Khan",
  profile: "Software Engineer",
  age: 25, 
  city: Patna,
}
   let developerList = Object.keys(developerInfo).map(key => (
        <p>{developerInfo[key]}</p>
      ));

return <div>{developerList}</div>

}

Lists of An Array & Object

In the case of Lists of Array & object, We will create lists for only a simple &  complex array  that contains multiple objects

Example –

function Developer(){
let developerInfo =[
{fullName:"Noor Khan", profile: "Software Engineer", age: 25},
{fullName:"Rapsan Jani", profile: "Doctor", age: 28},
{fullName:"Sunil Kumar", profile: "Teacher", age: 32},
{fullName:"Monika Kumari", profile: "Doctor", age: 26}
]
   let developerList = Object.map(data => (
        <tr>
          <td>{data.fullName}</td>
          <td>{data.profile}</td>
          <td>{data.age}</td>
       </tr>
      ));
return <table>{developerList}</table>
}

Lists of Nested array & objects

In the case of Lists of Nested arrays & objects, We will use a map() function within another map() function to create lists for multiple arrays & objects that will remain within each other.

Example –

function Team(){

let teamInfo = [
   department:"PHP",
   developers:[
   {name:"Noor Khan"},
   {name:"Monika Singh"}
  ],
  department: "React",
  developers:[
    {name:"Rapsan Jani"},
   {name:"Sunil Kumar"}
  ]
];

let teamList =  teamInfo.map((departmentName) => {
   <li>{partmentName.department}</li>
   <ul>
    departmentName.developers.map((developerName) => {
    <li>{developerName.name}</li>
   })
   </ul>
});
return <ul>{teamList}</ul>
}

 

Key is required for React Lists

As we have already seen many examples of lists in the previous steps. But those examples will be raised a warning error (Each child in a list should have a unique “key” prop) in the browser console when you run them with react app. So, To resolve this error, You must implement a key when you create lists.

The Key –

The key is an attribute that helps react app to identify which elements have been updated & deleted.

To declare a key, You will have to keep the following points in your mind –

  • a key must be declared to create lists.
  • value of key must be unique to each sibling but It can not be globally unique.
  • value of key should be the unique id of the given data. If data is coming from the database then you should take table id (primary key) as a key value.
  • a key can be passed to the component. But  It does not treat as props.

Example –

function Developer(){
let developerInfo =[
{id:101, fullName:"Noor Khan", profile: "Software Engineer", age: 25},
{id:102, fullName:"Rapsan Jani", profile: "Doctor", age: 28},
{id:103, fullName:"Sunil Kumar", profile: "Teacher", age: 32},
{id:104, fullName:"Monika Kumari", profile: "Doctor", age: 26}
]
   let developerList = Object.map(data => (
        <tr key={data.id}>
          <td>{data.fullName}</td>
          <td>{data.profile}</td>
          <td>{data.age}</td>
       </tr>
      ));
return <table>{developerList}</table>
}

Steps to create Lists in React Js

Now, You will learn to create lists with React app step by step. So, kindly follow each step carefully so that you can easily create lists for other types of array data.

1. Create React App

First of all, You have to create a react app with NPM. If you don’t know, you can read the following article then follow this step.

Create React App Project Step by Step

2. Create lists within a component

You can create lists within any type of functional or class component. But here I will use the default App functional component for creating lists.

File Name – App.js

import React from "react";
function App(){
let developerInfo =[
{id:101, fullName:"Noor Khan", profile: "Software Engineer", age: 25},
{id:102, fullName:"Rapsan Jani", profile: "Doctor", age: 28},
{id:103, fullName:"Sunil Kumar", profile: "Teacher", age: 32},
{id:104, fullName:"Monika Kumari", profile: "Doctor", age: 26}
]
   let developerList = Object.map(data => (
        <tr key={data.id}>
          <td>{data.fullName}</td>
          <td>{data.profile}</td>
          <td>{data.age}</td>
       </tr>
      ));
return <table>{developerList}</table>

}
Export default App;

3. Render a Component to the DOM

By default, the App component is included in the index.js file to render to the DOM. But If you create your own component with another name then you will have to include & render in this file.

File Name – index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));

 4. Run React App

To run the app, you will have to start the development server by running the command npm start in your terminal.

http://localhost:3000/

What’s Next?

I hope you have understood to create lists in react and liked this post. Also, you can visit the official react lists

Now, You will learn How to create a form in React Js in the upcoming posts. So, continue to visit this website to learn more about the coding concepts and also share with friends who really interested to learn React Js.

 

 

Filed Under: React Js Tutorials

Hello Developer, Welcome to my Blog. I'm Md Nurullah, a software engineer with 5+ years in full-stack web development. As the founder of CodingStatus.com, I'm passionate about sharing coding knowledge and collaborating for a brighter future. Let's connect and code together!

Primary Sidebar

Secondary Sidebar

React Js Tutorials,
  • React Class Components with Props
  • React App with CDN
  • React Js Tutorial
  • Introduction to React Js
  • What is React Js
  • Create React App with NPM
  • React App Folder Structure
  • React Components
  • React Function Component
  • React Function Component with Props
  • React Export and Import Function components
  • React Class Component
  • ReactDOM.render() Method in react js
  • ReactDOM.createRoot() in React Js
  • React Fragment
  • Render Method in React Js – render()
  • React Forms
  • React Lists
  • React Conditional Render
  • React Hooks – useState, useEffect & Custom Hooks
  • React Lifecycle Methods
  • React Event Handling with Examples
  • React State with Example
  • React props with Examples
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved