Назад к задачам
Junior — Senior
5

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

Компании, где спрашивали:

ВТБВТБ
Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

Найдите и устраните недочеты в следующем 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>
  };
}