CodingStatus

- Level Up Your Status with Coding Expertise!

React Lists

By

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

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