How to Display List in Reactjs Example

    Oct 21, 2020       by Pankaj Kumar
how-to-display-list-in-reactjs-example.jpg

In this article, We will see how to display a simple listing, listing with Array of Objects and nesting list in React.js. This article is mainly focused for developers who have started working on React.js.

 

Simple Reactjs List with Simple Array

Here, I am going to show how to display data of simple array having list of countries in it. we will use .map to render the item in the template.

 

 
import React from "react";
 
function App() {
const Countries = [
{ name: "USA" },
{ name: "India" },
{ name: "Australia" },
{ name: "Spain" },
{ name: "France" },
{ name: "Japan" }
];
 
return (
<ul>
{Countries.map((data) => (
<li>{data.name}</li>
))}
</ul>
);
}
 
export default App;
 

 

When you run the above code, you’ll be given a warning that a key should be provided for list items. A “key” is a special string attribute you need to include when creating lists of elements. Let;s have a look at the code below:

 

 
import React from "react";
 
function App() {
const Countries = [
{ name: "USA" },
{ name: "India" },
{ name: "Australia" },
{ name: "Spain" },
{ name: "France" },
{ name: "Japan" }
];
 
return (
<div>
<ul>
{Countries.map((data, index) => (
<li key={index}>{data.name}</li>
))}
</ul>
</div>
);
}
 
export default App;
 

 

If you have unique id key availalbe in the array, then that is best to use because that will help to do edit, delete, and other related operations on specific item.

Display Array of Object List in React

To display array of object is also as simple as above we did. We have used the same .map method to get individual item and placed the individual value with the same way we do for accesing object item(using . operator). Let's have a look on below code:

 
import React from "react";
 
function App() {
const Users = [
{
  id: "01",
  name: "Leanne Graham",
  email: "Sincere@april.biz",
  zipcode: 12112
},
{
  id: "02",
  name: "Ervin Howell",
  email: "Shanna@melissa.tv",
  zipcode: 12111
}
];
 
return (
  <ul>
  {Users.map((data) => (
    <li key={data.id}>
   <p>{data.name}</p>
    <p>{data.email}</p>
    <p>{data.zipcode}</p>
    </li>
  ))}
  </ul>
);
}
 
export default App;
 

 

Display Nested Lists in React

Sometimes we needed to show data in nested form. Here, we will how to display data in nested way

 

 
import React from 'react';
 
function App() {
const users = [
{
id: "01",
name: "Leanne Graham",
email: "Sincere@april.biz",
zipcode: 12112
},
{
id: "02",
name: "Ervin Howell",
email: "Shanna@melissa.tv",
zipcode: 12111
}
];
 
const finalArray = [users, users];
 
return (
<div>
<ul>
{finalArray.map((nestedItem, i) => (
<ul key={i}>
<h3> List {i} </h3>
{nestedItem.map(data => (
<li key={data.id}>
<div>{data.name}</div>
<div>{data.email}</div>
<div>{data.zipcode}</div>
</li>
))}
</ul>
))}
</ul>
</div>
);
}
 
export default App;
 

 

Conclusion

In this article, We learn about How to Display List in Reactjs Example

I hope this article helped you to get the basic idea of displaying data in React.js application. You can also find other demos/articles at React.js Sample Projects here to start working on enterprise-level applications.

Let me know your thoughts over email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share it with your friends.

Thank You!

Reactjs List

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS