How to update only one object in a state array?

Question

JavaScript

Good afternoon.
I teach React, I consolidate my knowledge with practice - I write my own small application, ToDo List.
I wanted to implement the functionality of updating an already created item, but I absolutely can’t figure out how to do it right.

For the time being, I use a blank of the type:

const initialItems = [
  { message: 'Задача 1' , key: 1 },
  { message: 'Задача 2' , key: 2 },
  { message: 'Задача 3' , key: 3 }
]

In the markup I write:

...
{arrMessage.map(card, => (
  <Card
    card={card}
    // сюда из компонента Card передаю данные карточки
    cardTransfer={onItemClick}
    key={card.key}
  />
))}
...

Element click handler:

function onItemClick(card) {
  setButton('Update');
  setAreaVisible(true);
  setAreaValue(card.message);
  // пустота
}

When you click on a list item, a textarea appears with already recorded data, but I couldn’t figure out how to overwrite the new ones exactly in the same object.
I found various articles, including this one ( Arrays of objects in state - how to update? ), but did not understand the answer.

Explain, please.

Answer 1

Did you not understand a piece of code?

onItemHintClick = (index, e) =>
  this.setState(({ items }) => ({
    items: [
      ...items,
      [index]: {
        ...items[index],
        htogle: !items[index].htogle,
      },
    ],
  }));

Well, you don't need to learn React, but Javascript.
https://developer.mozilla.org/en-US/docs/Web/JavaS...