Iterate objects inside objects in react

Question

I have this objects inside objects that I wanted to iterate in react

const [PersonInfo, setPersonInfo] = useState({
 {name: "Juan", address: "Street1"},
 {name: "Kristine", address: "Street2"}
}

I tried to render it in react using

return (
  <div>
    {{Object.keys(PersonInfo).map(key => 
        <option value={key}>{PersonInfo[key]}</option>
      )}
  </div>
)

But it only shows the first value which is Juan. What is wrong with my code?

the data you pass to useState is not valid, and the code will not run. Please show some working sample. — Gabriele Petrioli
– Gabriele Petrioli, Commented Dec 16, 2020 at 9:28
@GabrielePetrioli default value in useState is {}. and I add new object using setPersonInfo({...PersonInfo, name: "Juan", address: "street1", }) — Newboy11
– Newboy11, Commented Dec 16, 2020 at 9:42

Nemanja Lazarevic · Accepted Answer · 2020-12-16 09:52:14Z

1

You have syntax errors, what you should do instead is save array insde your useState and loop over it using .map

const [personsInfo, setPersonsInfo] = useState([
  {name: "Juan", address: "Street1"},
  {name: "Kristine", address: "Street2"}
])

After that you can render it like so:

  return (
    <select name="personAddress">
      {personsInfo.map(person => {
        return (
          <option key={person.name} value={person.address}>{person.name}</option>
         )
      })}
    </select>
  );

This example assumes that each person has a unique name. Therefore the key={person.name}.

answered Dec 16, 2020 at 9:52

Nemanja Lazarevic

1,0478 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Iterate objects inside objects in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related