close

How to loop an object in React?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to loop an object in React? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to loop an object in React ?

  1. How to loop an object in React ?

    to loop an object in React When I use Object.entries with map, I use Array Destructuring like the following and just call them directly.
    Object.entries(tifs).map(([key, value]) => ( <div key={key}>{value}</div> ));

  2. How to loop an object in React ?

    to loop an object in React When I use Object.entries with map, I use Array Destructuring like the following and just call them directly.
    Object.entries(tifs).map(([key, value]) => ( <div key={key}>{value}</div> ));

Method 1

You can use it in a more compact way as:

const tifs = {1: 'Joe', 2: 'Jane'};
...

return (
   <select id="tif" name="tif" onChange={this.handleChange}>  
      { Object.entries(tifs).map((t,k) => <option key={k} value={t[0]}>{t[1]}</option>) }          
   </select>
)

And another slightly different flavour:

 Object.entries(tifs).map(([key,value],i) => <option key={i} value={key}>{value}</option>) 

Method 2

When I use Object.entries with map, I use Array Destructuring like the following and just call them directly.

Object.entries(tifs).map(([key, value]) => (
    <div key={key}>{value}</div>
));

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment