reactjs - React useState -how to set object with arrays?

Question

I cant seem to be able to update an object including arrays. Ive researched and still dont know. Thank you.

the structure of state:

items = {
 names: [],
 cities: []
}

const [items, setItems] = useState({});

const update = (categoryName, element) => setItems(...items, [categoryName]: element)
update("names", "mike")

this just replaces elements inside array but doesnt add to them

question from:https://stackoverflow.com/questions/65881538/react-usestate-how-to-set-object-with-arrays

Answer 1

You would want to use the callback function and get the last state, like so

const update = (categoryName, element) =>
  setItems((oldItems) => ({
    ...oldItems,
    [categoryName]: [...(oldItems[categoryName] || []), element]
  }));

Full example

import { useEffect, useState } from "react";

export default function App() {
  const [items, setItems] = useState({ names: [] });

  const update = (categoryName, element) =>
    setItems((oldItems) => ({
      ...oldItems,
      [categoryName]: [...(oldItems[categoryName] || []), element]
    }));

  // example to call `update`
  useEffect(() => {
    update("test", "blub");
  }, []);

  return (
    <div className="App">
      {items.test?.map((item) => (
        <p>{item}</p>
      ))}
    </div>
  );
}