map over nested object in an array

Question

Currently trying to map over an array that has multiple nested objects. When I run the map function, it only returns the outer object.

const [moreDetails, setMoreDetails] = useState([]);
const [details, setDetails] = useState("");

const handleAddMoreDetails = () => {
  setMoreDetails((prevState) => [
    {
      ...prevState,
      details: details
    }
  ]);
  setDetails("");
};

return (
  <div className="App">
    <input
      type="text"
      value={details}
      onChange={(e) => setDetails(e.target.value)}
    />

    <button onClick={handleAddMoreDetails}>Add Detail</button>

    {moreDetails &&
      moreDetails.map((item, index) => <p key={index}>{item.details}</p>)}
  </div>
);

This is similar to what I am trying to accomplish. I would like for it to render all of them when added. I am thinking it may be the one I am trying to add a new detail

CodeSandbox

What is item in each iteration? Is it really an object as you claim? If it is an object, what are its keys? Are they what you expect? The screenshot of the structure of moreDetails doesn't seem to match what you think it is and you need to figure out why. — Code-Apprentice
– Code-Apprentice, Commented Aug 10, 2022 at 16:50

David · Accepted Answer · 2022-08-10 16:50:19Z

2

The problem isn't in the rendering, it's in the state update:

setMoreDetails((prevState) => [
  {
    ...prevState,
    details: details
  }
]);

If prevState was an array, for example:

[
  { details: 'first record' }
]

Then what happens after your state update? This update is creating an array with one object, which contains both the previous array and the new object. So the new result is:

[
  {
    0: {
      details: 'first record'
    },
    details: 'second record'
  }
]

Each update to the state will continue to create an array with one object, nesting the previous array inside that object.

Instead, create an array containing the elements of the previous array plus the one new object:

setMoreDetails((prevState) => [
  ...prevState,
  {
    details: details
  }
]);

So the new state would be:

[
  { details: 'first record' },
  { details: 'second record' }
]

edited Aug 10, 2022 at 16:50

answered Aug 10, 2022 at 14:20

David

221k42 gold badges245 silver badges337 bronze badges

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

5 Comments

arod1207 Over a year ago

its a single array with nested objects. I tried flat(), but that didn't work

David Over a year ago

@arod1207: Can you perhaps replicate this in a runnable minimal reproducible example? It doesn't need to be a full React app. If the problem is simply mapping over a data structure then you can manually create the data structure and map over it, doing nothing more than logging a result to the console. That example can demonstrate what specifically isn't working as expected.

arod1207 Over a year ago

Just updated question with codesandbox link. You can see how my objects become nested in the array.

David Over a year ago

@arod1207: I've udpated the answer. The problem wasn't in mapping over the structure, the problem was in how you were creating/updating the structure.

arod1207 Over a year ago

Such a bonehead mistake on my part. You are exactly right. Thank you so much for the help and explanation

Collectives™ on Stack Overflow

map over nested object in an array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related