Got an array of objects or data items and want to list them in your react app? We have got it covered! Rendering the array of objects is very simple. In this blog, we’ll learn how to render an array of objects or data items in a react component with JSX, keys in react, and how to filter out data items with the help of JavaScript methods.
Rendering arrays of objects in React can be a challenge for developers who are new to the framework. Fortunately, React provides a powerful yet simple way of rendering data in an efficient manner. The most popular way to create a list or render an array of objects in react is using array.map() method which takes an array of data and maps it to an array of components, so that each data item is represented by a corresponding component. Additionally, the map() function can help with debugging and performance.
What is an Array of Objects?
An array of objects simply called as ‘List’ in React, is the collection of data having similar information. An array of objects can be anything like different data structures, car names, etc. With the help of available JavaScript Array.map() and filter() methods, the array of objects/items can be transformed into an array of components also known as a list. Lists are commonly used to store data retrieved from a server like any user information, etc. Each data object/item in the array consists of properties that can be easily accessed and manipulated. For example, an array of objects in React could contain a list of car names, each of which has its own model and name. See the below syntax:
const carData = [
{
name: ‘BMW’,
model: 2022
},
{
name: Audi,
model: 2021
},
]
Given is the list or array of objects consisting of names, and models of cars each of those having different properties. We can use these arrays of objects to pass information between different components, store data in state, or even populate lists in a component.
Want to learn more that how the data are passed between different react components with the help of props! Check out our latest blog on Props in react.
To render an array of objects/items, we have different ways out of which are: iterating a loop, using map(), and using filter(). Out of all these methods, the most popular way is using Array.map().
Rendering array of objects using JavaScript map()
To render an array of objects/items in React, we loop through an array with the .map() method and return a single item. In the below example, we loop through the courses array and return a <li> element for each item. We can use this method when we want to display a single element for each item in the given array.
When we call the .map() function in JavaScript it converts the array into whatever we return from the callback function we pass into it. This function always creates a new array. Let’s understand one example in detail, step-by-step.
Steps to render an array of objects/list:
Below are the steps needed to render an array of objects or list in react.
Step 1: Create a react application
npx create-react-app demoStep 2: Change directory
cd demoStep 3: Creating data as array
Once we have created a new react application, add the following code in the App.js file before the functional component App().
const courses = [
"Full Stack Developement Program",
"Python Automation Testing Program",
"UI/UX Program",
];Step 4: Mapping the array into a new array of JSX nodes as arrayDataItems
const arrayDataItems = courses.map((course) => <li>{course}</li>);Step 5: Return arrayDataItems from the component wrapped in <ul>
<ul>{arrayDataItems}</ul>Complete Example:
App.js file
import "./App.css";
import React from "react";
//define the mock data
const courses = [
"Full Stack Developement Program",
"Python Automation Testing Program",
"UI/UX Program",
];
function App(props) {
/* Mapping the courses into a new array of JSX nodes as arrayDataItems */
const arrayDataItems = courses.map((course) => <li>{course}</li>);
return (
<div className="container">
<div>
<h1>Render List/Array of Items</h1>
</div>
{/* returning arrayDataItems wrapped in <ul> */}
<ul>{arrayDataItems}</ul>
</div>
);
}
export default App;Output:
One thing that we may notice here is that the console will give a warning as shown below.
Warning: Each child in a list should have a unique “key” prop.
This warning states that we need to provide a unique key to each data item in the array. Next we will examine why we want to add a unique key to a list of elements rendered by an array.
Keys in React
Keys in React help in knowing which array data item each component corresponds to. Also, Keys in React help in identifying and updating each item between renders without causing any bugs. Rendering an array of items into a react component makes it important to always provide a key to track the items between renders. Generally, we use id: as the key in various data arrays.
Keys has some rules that we must follow to avoid any errors:
- Keys must be unique– every item of the array must have a unique key.
- Keys must be permanent– keys should not change their purpose or must not be changed between re-renders.
Example:
Let’s understand how we use keys in react to render an array of objects/list. We must use keys in our data. For demonstrating this example, step1 and step2 will be the same.
Step 1: Creating data as an Array with Key
Once we have created a new react application, add the following code in the App.js file before the functional component App(). Earlier we haven’t specified the unique key in the data but now have used them in our structured data to avoid warnings/errors.
const courses = [
{
id: 0,
name: 'Full Stack Developement Program',
price: '89,999'
},
{
id: 1,
name: 'Python Automation Testing Program',
price: '64,999'
},
{
id: 2,
name: 'UI/UX Program',
price: '89,999'
}
]Step 2: Mapping the array into a new array of JSX nodes as arrayDataItems
const arrayDataItems = courses.map(course =>
<li key={course.id}>
<p>{course.name}</p>
<span>{course.price}</span>
</li>
)Step 3: Return arrayDataItems from the component wrapped in <ul>
<ul>{arrayDataItems}</ul>Complete Example:
App.js file
import "./App.css";
import React from "react";
//define the mock data with keys
const courses = [
{
id: 0,
name: 'Full Stack Developement Program',
price: '89,999'
},
{
id: 1,
name: 'Python Automation Testing Program',
price: '64,999'
},
{
id: 2,
name: 'UI/UX Program',
price: '89,999'
}
]
function App() {
/* Mapping the courses into a new array of JSX nodes as arrayDataItems */
const arrayDataItems = courses.map(course =>
<li key={course.id}>
<p>{course.name}</p>
<span>{course.price}</span>
</li>
)
return (
<div className="container">
<div>
<h1>Render List/Array of Items with Key</h1>
</div>
{/* returning arrayDataItems wrapped in <ul> */}
<ul>{arrayDataItems}</ul>
</div>
);
}
export default App;App.css file (Optional)
.container {
margin-left: 20px;
}
.container h1 {
color: green
}
.container li {
display: flex;
flex-direction: column;
font-size: 20px;
background-color: #35F543;
width: 400px;
color: white;
padding: 2px;
border-radius: 20px;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}Output:
Filtering arrays of items
Till now we are returning a full array of items but what if we only want to show courses with a specific category? Then, we can use JavaScript’s filter() method to return just those with a matching category. Filter() method takes an array of objects/items, passes and checks whether the function returns true or false, and finally returns a new array of filtered items that returned true. Let’s understand with the help of an example.
const courses = [
{
id: 0,
name: 'Full Stack Developement Program',
price: '89,999',
category: Software Development’
},
{
id: 1,
name: 'Python Automation Testing Program',
price: '64,999',
category: Testing’
},
{
id: 2,
name: 'UI/UX Program',
price: '89,999',
category: design’
}
]In the above data, we have three different categories and let’s say we want only courses related to “Testing”, then the filter() method will return the course having a category as “Testing”.
Step 1: Create a new array having category as “Testing”
const testings = courses.filter(course =>
course.category === 'Testing’
);Step 2: Mapping over “Testing”
const arrayDataItems = testings.map(course =>
<li key={course.id}>
<p>{course.name}</p>
<span>{course.price}</span>
<p>{course.category}</p>
</li>
)Step 3: Return arrayDataItems from the component wrapped in <ul>
<ul>{arrayDataItems}</ul>Complete Example:
App.js file
import "./App.css";
import React from "react";
//define the mock data with keys
const courses = [
{
id: 0,
name: 'Full Stack Developement Program',
price: '89,999',
category: 'Software Developmen',
},
{
id: 1,
name: 'Python Automation Testing Program',
price: '64,999',
category: 'Testing',
},
{
id: 2,
name: 'UI/UX Program',
price: '89,999',
category: 'design'
}
]
function App() {
/* new array of only 'testing' category */
const testings = courses.filter(course =>
course.category === 'Testing'
);
/* Mapping the courses into a new array of JSX nodes as arrayDataItems */
const arrayDataItems = testings.map(course =>
<li key={course.id}>
<p>{course.name}</p>
<span>{course.price}</span>
<p id="category">{course.category}</p>
</li>
)
return (
<div className="container">
<div>
<h1>Filtering List/Array of Items</h1>
</div>
{/* returning arrayDataItems wrapped in <ul> */}
<ul>{arrayDataItems}</ul>
</div>
);
}
export default App;Output:
Last words
I hope this blog has helped you in learning about how to render a list or array of objects in react. To render an array of objects, we saw how to use an array.map() function. Apart from this, we learned how to create an array of filtered items using JavaScript’s filter() method. We also noticed, while rendering an element inside the component, we must use a unique key to avoid any errors. Regardless of which method we use, it is important to remember that we need to access the data within the object to render it correctly.
Before you go, If you are looking to become a Full Stack Developer, we suggest you join our industry-leading project-based career program on Full Stack Development which provides you with 100% job placement support, globally recognized certification, helps in mastering front-end, and back-end, while building your awesome career portfolio. So, what are you waiting for? Join now!
