If you are a beginner React Developer and want to know how to display a list of items on the browser screen then you are at the right place.
In this tutorial, we are going to learn 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.
To show the lists, we will learn to use JavaScript’s Array.map() method. This method takes data transform to list view.
We have a array of Fruits, and we want to display the Fruits
list in React app, so here is the code that we will use to render the list items using .map()
method.
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;
In the following React List example, we render a list of items that contain movie names and their respective id. We are using the .map() method to fetch the items from the Movies array, and every item has a unique key property.
Keys are used in React to figure out how to update a list, be it adding, updating, or deleting an item in a list.
Since React uses a virtual DOM and depends on the key to identifying items of a list, so in the above list example, we provided a unique id to every list item.
If we don’t define key prop to display a list in JSX, we might get following error.
Warning: Each child in a list should have a unique “key” prop.
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;
Displaying items from a list of objects in React is very simple. We can iterate over a list of objects using the .map()
method in React JSX. Here is the example in which we mapped a list of objects and displayed them in the React app.
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'
},
];
return (
<ul>
{Users.map((data) => (
<li key={data.id}>
<p>{data.name}</p>
<p>{data.email}</p>
<p>{data.phone}</p>
</li>
))}
</ul>
);
}
export default App;
In this step, we will combine two arrays and show the nested view using the list data in React.
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;
i hope you like this article.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
PHP - Create file if it doesn’t already exist
In this article, we will use PHP to chec...How to Create Custom Directive Attribute in Angular9?
Angular Directives is basicall...Laravel Create and Delete Directory
Managing files in web application is one...How to get Last Record From leftJoin Table in Laravel7?
In this article i will share with you on...How to get Next Previous Records in Laravel7.x with Example
We all ken that, Laravel is propagating...