11/14/23, 4:53 PM How to Destructure Object Properties Using array.
map() in React
Forum Donate
Learn to code — free 3,000-hour curriculum
NOVEMBER 2, 2022 / #REACT
How to Destructure Object
Properties Using array.map()
in React
Caleb Olojo
One of the methods frontend developers use the most
in JavaScript is the Array.prototype.map() method.
https://www.freecodecamp.org/news/destructure-object-properties-using-array-map-in-react/ 1/9
11/14/23, 4:53 PM How to Destructure Object Properties Using array.map() in React
From having to render a list of items in the DOM to looping through
Forum Donate
a series of blog posts – and many more – the usefulness goes on and
on. Learn to code — free 3,000-hour curriculum
Say you have a list of items in an array that needs to be rendered as
a React component onto a web page. The ideal way to map a series
of items in an array looks like this:
const shoppingList = ['Oranges', 'Cassava', 'Garri', 'Ewa', 'Dodo', '
export default function List() {
return (
<>
{shoppingList.map((item, index) => {
return (
<ol>
<li key={index}>{item}</li>
</ol>
)
})}
</>
)
}
The snippet above pretty much fulfills its purpose. But what if you
have to map through an array of objects with multiple properties?
Say, an array like the one below?
const employees = [
{
name: 'Saka Manje',
address: '14, cassava-garri-ewa street',
gender: 'Male',
},
{
name: 'Wawawa Warisii',
address: '406, highway street',
gender: 'Male',
https://www.freecodecamp.org/news/destructure-object-properties-using-array-map-in-react/ 2/9
11/14/23, 4:53 PM How to Destructure Object Properties Using array.map() in React
},
] Forum Donate
Learn to code — free 3,000-hour curriculum
To be concise, let's stick with two items in the array. Now, let's use
the same approach that we used in the previous snippet.
export default function EmployeesList() {
return (
<>
{employees.map((employee, index) => {
return (
<div key={index}>
<p>{employee.name}</p>
<p>{employee.address}</p>
<p>{employee.gender}</p>
</div>
)
})}
</>
)
}
While the approach in the snippet above looks perfectly okay, you
might wonder – "What happens when I get deeply nested objects as
data from an endpoint?"
How to Destructure Object
Properties
In the previous section, we went through the conventional way of
rendering data from an API endpoint on a web page with
JavaScript's .map() method.
In this section, we'll take a look at how we can achieve the same
result without using dot notation to access the properties in the
https://www.freecodecamp.org/news/destructure-object-properties-using-array-map-in-react/ 3/9
11/14/23, 4:53 PM How to Destructure Object Properties Using array.map() in React
array.
Forum Donate
But, before weLearn
do that, what
to code — exactly does it mean
free 3,000-hour to destructure
curriculum
object properties? Well, the purpose of destructuring is to be able to
access variables within arrays or objects and then proceed by
assigning them to a variable. You can see an example below.
const person = {
name: 'Adrian Tojubole',
role: 'Lead Engineer',
salary: '$130k/year',
}
let { name, role, salary } = person
console.log(name); // Adrian Tojubole
console.log(role); // Lead Engineer
console.log(salary); // $130k/year
You'll notice that we were able to access the properties – name ,
role , and salary – of the person object. This was instead of using
the dot notation to access them, like it is in the snippet below, which
makes the process repetitive for us.
console.log(person.name);
console.log(person.role);
console.log(person.salary);
With that out of the way, we'll take this pattern and use it whenever
we want to use the .map() method in React. Take the array of
objects below, for example:
https://www.freecodecamp.org/news/destructure-object-properties-using-array-map-in-react/ 4/9
11/14/23, 4:53 PM How to Destructure Object Properties Using array.map() in React
const employeesData = [ Forum Donate
{
name: 'Saka manje',
Learn to code — free 3,000-hour curriculum
address: '14, cassava-garri-ewa street',
attributes: {
height: '6ft',
hairColor: 'Brown',
eye: 'Black',
},
gender: 'Male',
},
{
name: 'Adrian Toromagbe',
address: '14, kogbagidi street',
attributes: {
height: '5ft',
hairColor: 'Black',
eye: 'Red',
},
gender: 'Male',
},
]
In the snippet above, you'll notice that we have an object nested
inside another object, as a property. Now, the initial way you might
access the properties in that nested object would look like this:
employeesData.map(data => data.attributes.height);
But, when you destructure the properties in that object, the syntax
looks somewhat like this:
employeesData.map(
({ name, address, attributes: { height, hairColor, eye }, gender },
return name, address, height, hairColor, eye
https://www.freecodecamp.org/news/destructure-object-properties-using-array-map-in-react/ 5/9
11/14/23, 4:53 PM How to Destructure Object Properties Using array.map() in React
}
) Forum Donate
Learn to code — free 3,000-hour curriculum
The snippet above eliminates the process of doing this:
employee.name , employee.attributes.height , and so on.
Now, that you have an idea of how it works, it is time to place this
.map() into a React component, then return the corresponding
properties.
export default function Employees() {
return (
<div>
{employeesData.map(
(
{ name, address, gender, attributes: { height, hairColor, e
index
) => {
return (
<div className="employees" key={index}>
<p>{name}</p>
<p>{address}</p>
<p>{gender}</p>
<p>{height}</p>
<p>{eye}</p>
<p>{hairColor}</p>
</div>
)
}
)}
</div>
)
}
Wrapping Up
https://www.freecodecamp.org/news/destructure-object-properties-using-array-map-in-react/ 6/9
11/14/23, 4:53 PM How to Destructure Object Properties Using array.map() in React
With this approach you can save a lot of time you spend using dot
Forum Donate
notation to access object properties. This is useful as time goes on,
because you may begin
Learn to interface
to code with GraphQL
— free 3,000-hour APIs, and some of
curriculum
these APIs are commonly known to have deeply nested objects
being returned as data.
You can also destructure array properties, too. A great example is
the way we destructure a value and the callback function
setValue when we're using one of the popular React hooks –
useState
const [count, setCount] = React.useState(0)
Thank you for reading this tutorial. I hope you found it helpful.
Caleb Olojo
Web developer
If you read this far, thank the author to show them you care.
Say Thanks
Learn to code for free. freeCodeCamp's open source curriculum has
helped more than 40,000 people get jobs as developers.
Get started
ADVERTISEMENT
https://www.freecodecamp.org/news/destructure-object-properties-using-array-map-in-react/ 7/9
11/14/23, 4:53 PM How to Destructure Object Properties Using array.map() in React
Forum Donate
Learn to code — free 3,000-hour curriculum
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States
Federal Tax Identification Number: 82-0779546)
Our mission: to help people learn to code for free. We accomplish this by creating thousands of
videos, articles, and interactive coding lessons - all freely available to the public. We also have
thousands of freeCodeCamp study groups around the world.
Donations to freeCodeCamp go toward our education initiatives, and help pay for servers,
services, and staff.
You can make a tax-deductible donation here.
Trending Guides
JS isEmpty Equivalent Coalesce SQL
Submit a Form with JS Python join()
Add to List in Python JS POST Request
Grep Command in Linux JS Type Checking
String to Int in Java Read Python File
Add to Dict in Python SOLID Principles
Java For Loop Example Sort a List in Java
Matplotlib Figure Size For Loops in Python
Database Normalization JavaScript 2D Array
https://www.freecodecamp.org/news/destructure-object-properties-using-array-map-in-react/ 8/9
11/14/23, 4:53 PM How to Destructure Object Properties Using array.map() in React
Nested Lists in Python SQL CONVERT Function
Forum Donate
Rename Column in Pandas Create a File in Terminal
Learn to code — free 3,000-hour curriculum
Delete a File in Python Clear Formatting in Excel
K-Nearest Neighbors Algo Accounting Num Format Excel
iferror Function in Excel Check if File Exists Python
Remove From String Python Iterate Over Dict in Python
Our Charity
About Alumni Network Open Source Shop Support Sponsors Academic Honesty
Code of Conduct Privacy Policy Terms of Service Copyright Policy
https://www.freecodecamp.org/news/destructure-object-properties-using-array-map-in-react/ 9/9
