Adding new object to array of objects using useState is not working in React

Question

I am trying to add new object to array of objects but I can see in console it's not updating the users array. Can you please help me to understand what's wrong with this code.

function Details() {
  const [user, setUser] = useState({
    prn: 1,
    name: "",
    gender: "M",
    mobile: 1234567890,
    dept: "",
    year: "",
    sem: ""
  })

  const [users, setUsers] = useState([
    {
      prn: 12,
      name: "Shrut",
      gender: "M",
      mobile: 1234567890,
      dept: "CSE",
      year: "First",
      sem: "Second"
    },
    {
      prn: 13,
      name: "Shrutika",
      gender: "F",
      mobile: 1234567890,
      dept: "CSE",
      year: "First",
      sem: "Second"
    }
  ]);

  const onEnroll = () => {
    alert("Created successfully " + user.name + " " + user.dept);
    user.prn = 14;
    setUsers(oldList => [...oldList, user]);
    console.log(users);
  }
}

It is working as expected stackblitz. Just click enroll button. Reason explained by Amilas answer — DecPK
– DecPK, Commented Aug 6, 2022 at 18:17

Amila Senadheera · Accepted Answer · 2022-08-06 18:14:55Z

2

Your state is getting updated correctly. But the call setUsers(...) is asynchronous. You cannot expect to log the updated value right after it. But if you move the log to the component body level, then it will get logged in the next re-render.

  const onEnroll = () => {
    alert("Created successfully " + user.name + " " + user.dept);
    user.prn = 14;
    setUsers(oldList => [...oldList, user]);
    
  }
   
  console.log(users);

answered Aug 6, 2022 at 18:14

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Adding new object to array of objects using useState is not working 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