Update array state in functional components using React

Question

I'm trying to update the cars array whenever the Add button is clicked. I see that new object is added to updatedCars array but when I try to set the state with it, the cars state won't get updated.

I still see the initial state even after adding a new object in the array.

export default function App() {
  const [cars, setCars] = useState([{ name: "Audi", type: "sedan" }]);
  
  const handleAdd = () => {
    const newCar = { name: "Benz", type: "sedan" };
    const updatedCars = [...cars, newCar];
    console.log("updatedCars", updatedCars);
    setCars(updatedCars);
    console.log("result", cars);
  };
  
  return (
    <div className="App">
      <button onClick={handleAdd}>Add</button>
    </div>
  );
}

I created a working example using CodeSandbox. Could anyone please help?

score 1 · Answer 1 · answered Jan 05 '21 at 19:01

setCars is the asynchronous method, and you can't get the updated value of cars immediately after setCars()

setCars(updatedCars);
console.log(cars); //This will console old value of `cars`

You should use useEffect with adding a cars dependency to check updated value.

useEffect(() => {
  console.log(cars);
}, [cars]);

Update array state in functional components using React

1 Answers1