Изменить объект в переменной (состоянии)

Допустим в состоянии есть объект userData.

import { useState } from 'react';

function App() {
  // Объект userData
  const [userData, setUserData] = useState({
    name: "Иван",
    age: 25,
    position: "Программист"
  });

  return (
    <>
      <p>Имя: { userData.name }. Должность: { userData.position }</p>
    </>
  )
}

Данный код сгенерирует:

<p>Имя: Иван. Должность: Программист</p>

Теперь надо сменить должность. Если сделать так, то код сработает не совсем корректно:

setUserData({
  position: "Старший программист"
});

// Будет сгенерировано
<p>Имя: . Должность: Старший программист</p>

Это произошло из-за того, что мы полностью переопределили свойство userData, т.е. в коде выше у объекта только одно свойство «position».

Чтобы изменить только одно свойство у объекта, не удалив текущие, можно через код ниже:

setUserData({
  ...userData,
  position: "Старший программист"
});

// Будет сгенерировано
<p>Имя: Иван. Должность: Старший программист</p>