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

Условие

Найдите и устраните логические и синтаксические ошибки в приведённом ниже фрагменте React‑приложения. При необходимости переименуйте переменные, но сохраняйте всю структуру кода.

import React, { useState } from "react";
import "./index.css";
import Todo from "./Todo";

export const todos = [
  {
    name: "clear",
    id: "1",
    imagesrc: "https://avatars.githubusercontent.com/u/45297354?v=4",
  },
  {
    name: "buy",
    id: "2",
    imagesrc: "https://avatars.githubusercontent.com/u/6751787?v=4",
  },
  {
    name: "change",
    id: "3",
    name: "code",
    id: "4",
    name: "test",
    id: "5",
  },
];

export default function App() {
  const [query, setQuery] = React.useState("");
  return (
    <div className="App">
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />

      {todos
        .filter((todo) => todo.name.includes(query))
        .map((el) => (
          <Todo todo={el} />
        ))}
    </div>
  );
};

Ответ

В третьем объекте повторяются name и id: сохранятся только test и 5. Разделите записи на три объекта, добавьте key в map; отсутствие key — не синтаксическая ошибка.

В массиве после первых двух элементов должны стоять отдельные записи:

{ name: 'change', id: '3' },
{ name: 'code', id: '4' },
{ name: 'test', id: '5' },

Обёртка App и управляемый input остаются прежними. Для списка:

{todos
  .filter(todo => todo.name.toLowerCase().includes(query.trim().toLowerCase()))
  .map(todo => <Todo key={todo.id} todo={todo} />)}

React.useState корректен, но отдельный импорт useState тогда лишний. Изображения у новых элементов не заданы: Todo должен поддерживать отсутствие imagesrc или данные нужно дополнить реальными URL. Самого кода Todo нет, поэтому его внутренние ошибки определить нельзя.