Создание чат‑приложения на React с лайками

Условие

Сделайте чат‑компонент, в котором отображаются сообщения, каждый пост имеет счётчик лайков и кнопку для их увеличения. Добавьте поле ввода текста и кнопку «Отправить сообщение», которые позволяют добавлять новые сообщения в список.

Ответ

Храните сообщения как массив {id,text,likes}, а ввод отдельно. Добавление и лайки обновляйте функционально, не изменяя прежние объекты.

function Chat() {
  const [messages, setMessages] = React.useState([]);
  const [text, setText] = React.useState('');
  const nextId = React.useRef(1);
  const send = event => {
    event.preventDefault();
    if (!text.trim()) return;
    const message = { id: nextId.current++, text: text.trim(), likes: 0 };
    setMessages(previous => [...previous, message]); setText('');
  };
  const like = id => setMessages(previous => previous.map(message =>
    message.id === id ? { ...message, likes: message.likes + 1 } : message));
  return <>
    <ul>{messages.map(message => <li key={message.id}>{message.text}
      <button onClick={() => like(message.id)}>Нравится: {message.likes}</button></li>)}</ul>
    <form onSubmit={send}><input aria-label="Сообщение" value={text} onChange={event => setText(event.target.value)} />
      <button type="submit">Отправить сообщение</button></form>
  </>;
}

Нужен импорт React. Это локальный учебный чат без сервера, сохранения и уникального лайка пользователя. Для многопользовательского варианта эти правила должны обеспечиваться backend, а не только клиентским state.