1. Use the built-in map() method:
The map() method is a built-in JavaScript array method that can be used to iterate over an array and create a new array with the results of calling a provided function on every element in the array.
In React, you can use the map() method to create a list of elements from an array of data.
For example, if you have an array of numbers:
const numbers = [1, 2, 3, 4, 5];
You can use the map() method to create a list of elements from the array:
const listItems = numbers.map((number) =>
);
2. Use the built-in forEach() method:
The forEach() method is a built-in JavaScript array method that can be used to iterate over an array and execute a provided function on each element in the array.
In React, you can use the forEach() method to create a list of elements from an array of data.
For example, if you have an array of numbers:
const numbers = [1, 2, 3, 4, 5];
You can use the forEach() method to create a list of elements from the array:
const listItems = [];
numbers.forEach((number) => {
listItems.push(
);
});
React display list of items example; This tutorial will show you how to show a simple list item, a list of objects, Nesting Lists in React, and lastly, we will have a look at how to update the state of the React list.
How to Display List in React JS App
Let’s follow the following steps to show list of items in react js app:
- Simple React List Example
- Render a List in React with Key
- React Nested Lists Example
Simple React List Example
To render the list items using .map() method, as shown below:
import React from 'react';
function App() {
const Fruits = [
{ name: 'Apple' },
{ name: 'Apricot' },
{ name: 'Honeyberry' },
{ name: 'Papaya' },
{ name: 'Jambul' },
{ name: 'Plum' },
{ name: 'Lemon' },
{ name: 'Pomelo' }
];
return (
<div>
{Fruits.map(data => (
<p>{data.name}</p>
))}
</div>
);
}
export default App;
Render a List in React with Key
To render the list items using .map() method, as shown below:
import React from 'react';
function App() {
const Movies = [
{ id: 1, name: 'Reservoir Dogs' },
{ id: 2, name: 'Airplane' },
{ id: 3, name: 'Doctor Zhivago' },
{ id: 4, name: 'Memento' },
{ id: 5, name: 'Braveheart' },
{ id: 6, name: 'Beauty and the Beast' },
{ id: 7, name: 'Seven' },
{ id: 8, name: 'The Seven Samurai' }
];
return (
<ul>
{Movies.map(data => (
<li key={data.id}> {data.name}</li>
))}
</ul>
);
}
export default App;
React Nested Lists Example
Two arrays and show the nested view using the list data in React; as shown below:
import React from 'react';
function App() {
const users = [
{
id: '01',
name: 'John Deo',
email: '[email protected]',
phone: '202-555-0163'
},
{
id: '02',
name: 'Brad Pitt',
email: '[email protected]',
phone: '202-555-0106'
},
];
const joinList = [users, users];
return (
<div>
<ul>
{joinList.map((nestedItem, i) => (
<ul key={i}>
<h3> List {i} </h3>
{nestedItem.map(data => (
<li key={data.id}>
<div>{data.id}</div>
<div>{data.name}</div>
<div>{data.email}</div>
<div>{data.phone}</div>
</li>
))}
</ul>
))}
</ul>
</div>
);
}
export default App;
Conclusion
React display list of items example; You have learned how to show a simple list item, a list of objects, Nesting Lists in React, and lastly, we will have a look at how to update the state of the React list.
