Найти объект в состоянии и обновить свойство

Question

У меня проблема с динамическим c состоянием, которое я устанавливаю. Мое первое состояние выглядит так:

const [exercises, setExercises] = useState([{
  id: 123,
  title: "Title here",
  category: "someCategory"
}])

Затем пользователь выбирает элемент этого состояния. Я создаю второе состояние, представляющее выбранный объект, но добавляю к нему дополнительные свойства. Например, я добавляю и инициализирую свойства «количество» и «единица измерения».

const [selectedExercises, setSelectedExercises] = useState([{
  id: 123,
  title: "Title here",
  category: "someCategory",
  amount: 0,
  unit: ''
}])

Я хочу, чтобы пользователь выбирал количество и единицу измерения из формы. Как мне получить доступ и изменить эти два свойства в состоянии? Так как я не знаю выбор пользователя, я должен сначала найти объект в состоянии.

Я пробовал что-то вроде (el вызывается из элемента ввода где-то):

setSelectedExercises([
  ...selectedExercises,
  (selectedExercises.find(exercise => exercise.title === el.title).amount = 1),
  ])

Как мне найти рассматриваемый объект и обновить его свойство количества (например, в методе onChange)?

Answer 1

const [selectedExercises, setSelectedExercises] = useState([{
  id: 123,
  title: "Title here",
  category: "someCategory",
  amount: 0,
  unit: ''
}]);

// Your handler should look like this and 
// you should call handleAmountChange(el.id, 1)

function handleAmountChange(amount, id) {
  setSelectedExercises(prev => prev.map(selectedExercise => {
    if (selectedExercise.id === id) {
      return {
        ...selectedExercise,
        amount
      }
    }

    return selectedExercise;
  }));
}

Более общая функция c для изменения любого свойства будет выглядеть следующим образом.

function handleChange(id, property, value) {
  setSelectedExercises(prev => prev.map(selectedExercise => {
    if (selectedExercise.id === id) {
      return {
        ...selectedExercise,
        [property]: value
      }
    }

    return selectedExercise;
  }));
}