React useState not updating array of objects

Question

I am trying to use useState in my react functional component to update array of objects but nothing is happening. Here is the code I am trying:

const countriesData = [
  { id: 1, name: "India", person: "Harpreet" },
  { id: 2, name: "Aus", person: "Monty" },
  { id: 3, name: "UK", person: "Preet" },
];

ReactDom.render(<App />, document.getElementById("root"));

function App() {
  const [name, setName] = useState(countriesData);
  const arr = [{ id: name.length + 1, name: "Pak", person: "Mnm" }];
  const AddMe = () => {
    setName({ ...name, ...arr });
  };
  return (
    <>
      <CountryName data={countriesData} />
      <button onClick={AddMe}> Add me</button>
    </>
  );
}

function CountryName({ data }) {
  return (
    <React.Fragment>
      {data.map((element, index) => (
        <div key={index}>
          <h1>{element.person}</h1>
          <span>from : {element.name}</span>
        </div>
      ))}
    </React.Fragment>
  );
}

I am a newbie in React. I also tried having prevState as setName argument and then add like setName(prevState{ ...pevState, ...arr }); Already had a look on so many sources but no luck. Any help will be appreciated. Thanks!

name is an array. In AddMe you are trying to merge objects — user0101
– user0101, Commented Aug 31, 2020 at 12:43
You are changing state property name, but you are always looping over countries data. Did you intend to loop over property name? — Alexander Staroselsky
– Alexander Staroselsky, Commented Aug 31, 2020 at 12:49

norbitrial · Accepted Answer · 2020-08-31 12:43:16Z

4

The initial data is an array, see in countriesData variable, also in setName you try to use {}.

You should call with [] instead of {} as:

setName([ ...name, ...arr ]);

answered Aug 31, 2020 at 12:43

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

3 Comments

Preet Over a year ago

Tried this but this is also not working. Nothing is happening in browser. No error

norbitrial Over a year ago

Probably you should use <CountryName data={name} /> instead of <CountryName data={countriesData} />.

Preet Over a year ago

Shouldn't it update the DOM also? Seems like console.log is working with name but not changing in DOM

Shubham Verma · Accepted Answer · 2020-08-31 12:49:32Z

You need to do:

setName([ ...name, ...arr ]);

or

setName((prev) => [...prev, ...arr]);

and also update data:

<CountryName data={name} />

Here is full code:

import React, { useState } from "react";
import "./styles.css";

const countriesData = [
  { id: 1, name: "India", person: "Harpreet" },
  { id: 2, name: "Aus", person: "Monty" },
  { id: 3, name: "UK", person: "Preet" }
];
function CountryName({ data }) {
  return (
    <React.Fragment>
      {data.map((element, index) => (
        <div key={index}>
          <h1>{element.person}</h1>
          <span>from : {element.name}</span>
        </div>
      ))}
    </React.Fragment>
  );
}
export default function App() {
  const [name, setName] = useState(countriesData);

  const arr = [{ id: name.length + 1, name: "Pak", person: "Mnm" }];
  const AddMe = () => {
    setName((prev) => [...prev, ...arr]);
  };
  return (
    <>
      <CountryName data={name} />
      <button onClick={AddMe}> Add me</button>
    </>
  );
}

Here is the demo: https://codesandbox.io/s/keen-buck-ue9sn?file=/src/App.js:0-826

Collectives™ on Stack Overflow

React useState not updating array of objects

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related