Why is returning only one object in for in loop

Asked Dec 27 '21 at 19:32

Active Dec 27 '21 at 19:32

Viewed 96 times

I'm making an app in react and I don't know why when I'm using for-in loop that returns only the first object, not all of them. My expected output is like in arr.map() but unfortunately I'm not able to that using objects instead of arrays.

places: {
  place_1: {
    title: 'Place 1',
  },
  place_2: {
    title: 'Place 2',
  },
  place_3: {
    title: 'Place 3',
  },
}


const App = () => {

 const handleMenu = () => {
    for (const key in places) {
      if (Object.hasOwnProperty.call(places, key)) {
        return (
          <h1>
            title={places[key].title}
          </h1>
        );
      }
    }
  };

  return (
    <div>
      {handleMenu()}
    </div>
  )
}

export default App

asked Dec 27 '21 at 19:32

Stairss

2

because return exits..... – epascarello Dec 27 '21 at 19:34
so how to avoid it to return all of the things? – Stairss Dec 27 '21 at 19:35
Why the `Object.hasOwnProperty.call(places, key)` instead of `places.hasOwnProperty(key)`? – Emiel Zuurbier Dec 27 '21 at 19:35
You need to *gather* "all of the things", and then `return` *that*. – Scott Hunter Dec 27 '21 at 19:35
1

Convert your object into something you can loop over Object.keys() Object.values() Object.entries() – epascarello Dec 27 '21 at 19:36
1

`Object.values(places).map(place => .........)` – epascarello Dec 27 '21 at 19:39

Why is returning only one object in for in loop

0 Answers0