Обнаружить и исправить ошибки в React‑компоненте списка

Условие

Найдите и устраните недочеты в следующем React‑компоненте, который отображает список и позволяет его перевернуть. Обратите внимание на неправильное обновление состояния и синтаксические ошибки в JSX.

import "./styles.css";
import React, { useState } from "react";
import Item from "./Item";

type SomeDTO = { id: number };

export default function App() {
  const [list, setList] = useState<SomeDTO[]>([{ id: 1 }, { id: 2 }]);

  const handleReverseClick = () => {
    setList((old) => old.reverse());
  };

  return {
    <div className="App">
      <h1>I have a bug, click on any item first and then reverse list</h1>

      <ul>
        {list.map((item, index) => (
          <Item key={index} item={item} />
        ))}
      </ul>
      <button onClick=(handleReverseClick)>Click me to reverse a list</button>
    </div>
  };
}

Ответ

reverse мутирует state и возвращает ту же ссылку; key={index} привязывает состояние Item к позиции. Разворачивайте копию и используйте item.id, одновременно исправив JSX.

const handleReverseClick = () => setList(previous => [...previous].reverse());
// В корректном return (...):
<ul>{list.map(item => <Item key={item.id} item={item} />)}</ul>
<button onClick={handleReverseClick}>Перевернуть список</button>

Функция должна возвращать JSX через круглые скобки, а обработчик передаётся фигурными, не onClick=(...). Новый массив сообщает React об изменении state; стабильный key сохраняет состояние каждого Item при перестановке. Сами объекты списка копировать не нужно, поскольку меняется только порядок.