. Advertisement .
..3..
. Advertisement .
..4..
Beginners should know that react is a JavaScript library that is used frequently and also getting immense popularity because of the simplicity and flexibility features it provides to the developers. With multiple projects out there to learn react, the map is one of those projects that you need to add. When writing an app using react, you may need to map the keys of the object. So, the question arises of how to map through an object in React.
You will be needing a map when fetching data from the server. Let’s discuss how to map through an object
How To Map Through an Object in React
To map through an object in react we have a few methods that can simply work. Check out the methods
Using Object.keys() Method
This method is used to map through an object. You can get an array of the keys of an object in return with the Object.keys() method that can be used to call the ‘map()’ method. See the code
export default function App() {
const staffs = {
name: 'Frank',
position: 'Deputy',
work_year: 10,
salary: 200
};
return (
<div>
{/* iterate object KEYS */}
{Object.keys(staffs).map((key, index) => {
return (
<div key={index}>
<h2>
{key}: {staffs[key]}
</h2>
<hr />
</div>
);
})}
<br />
<br />
<br />
{/* iterate object VALUES */}
{Object.values(staffs).map((value, index) => {
return (
<div key={index}>
<h2>{value}</h2>
<hr />
</div>
);
})}
</div>
);
}The ‘Object.keys’ method is used to get an of the keys of an object. Like this:
const staffs = {
name: 'Frank',
position: 'Deputy',
work_year: 10,
salary: 200
};
console.log(Object.keys(staffs));
console.log(Object.values(staffs));Output:
['name', 'position', 'work_year', 'salary']
['Frank', 'Deputy', 10, 200]The map() method can only be called an array, so you either need the object’s value or gets an array of the keys of an object. As you have noted, the function is passed to the Array.map method that gets called with each of the elements that exist in an array as well as the index of the current iteration. The ‘index’ for the ‘key’ prop is used in the example.
Using the ‘key Prop’
When you want to iterate over the keys of an object, just to be on the safer side, use the object’s key for the prop ‘key’ as it guarantees to be unique.
export default function App() {
const staffs1 = {
name: 'David',
position: 'Founder',
work_year: 15,
salary: 1500
};
return (
<div>
{/* iterate object KEYS */}
{Object.keys(staffs1).map(key => {
return (
<div key={key}>
<h2>
{key}: {staffs1[key]}
</h2>
<hr />
</div>
);
})}
</div>
);
}Using Object.values() Method
With this method, you can easily obtain an array of the object’s values. And, then you can call the map() method.
Check out the code:
export default function App() {
const staffs2 = {
name: 'Kevin',
position: 'Manager',
work_year: 8,
age: 32,
salary: 150
};
return (
<div>
{/* iterate object VALUES */}
{Object.values(staffs2).map((value, index) => {
return (
<div key={index}>
<h2>{value}</h2>
<hr />
</div>
);
})}
</div>
);
}Here is the code to get an array of the object’s value using the Object.values method:
const staffs2 = {
name: 'Kevin',
position: 'Manager',
work_year: 8,
age: 32,
salary: 150
};
console.log(Object.values(staffs2));Output:
['Kevin', 'Manager', 8, 32, 150]You can directly use this if you want to render the values of an object.
Conclusion
How to map through an object in react has been highlighted to help you code correctly. I hope you find it helpful!
Leave a comment