How to update UseState nested array with spread in React?

Question

I have three checkboxes and I would like to push the value to the equipment array in the below hook e.g.: if 2 boxes ticked the array should look like:

equipment: [{id: '1', name: 'bag', amount: 1}, {id: '2', name: 'phone', amount: 4}]

    const [form, setForm] = useState({
        firstName: "",
        lastName: "",
        middleName: "",
        position: "",
        level: "",
        equipment: []
    });

Is it a proper way to update the array or how should I do it with spread?

setForm({...form, ...form.equipment.push(value)}

Have you considered using separate state variables instead?

Phil
– Phil

2022-11-04 00:11:33 +00:00
Commented Nov 4, 2022 at 0:11 — Phil
– Phil, Commented Nov 4, 2022 at 0:11

Phil · Accepted Answer · 2022-11-04 00:13:27Z

1

In order to update state based on the current value, you should use the functional updates form for calling the setter. For example

setForm((prev) => ({
  ...prev,
  equipment: prev.equipment.concat(value),
}));

Putting all your state into a single object makes your code more complicated. Have you considered simply using separate variables?

const [firstName, setFirstname] = useState("");
const [lastName, setLastName] = useState("");
// ...
const [equipment, setEquipment] = useState([]);

// and when setting equipment...
setEquipment((eq) => [...eq, value]);

If you do need everything in a single object, you can always use a memo hook

const form = useMemo(() => ({
  firstName,
  lastName,
  middleName,
  position,
  level,
  equipment,
}), [firstName, lastName, middleName, position, level, equipment]);

answered Nov 4, 2022 at 0:13

Phil

166k25 gold badges265 silver badges269 bronze badges

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

2 Comments

OFRBG Over a year ago

In recommendation territory, there's react-hook-form.com.

Phil Over a year ago

@OFRBG I prefer formik.org

Collectives™ on Stack Overflow

How to update UseState nested array with spread in React?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related