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