Проведение ревью компонентов App и Todo в React‑приложении

Условие

Необходимо выполнить обзор кода файлов App.tsx и Todo.tsx.

// App.tsx

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

export const tasks = [
  {
    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 [search, setSearch] = React.useState("");
  return (
    <div className="App">
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      {tasks
        .filter((item) => item.name.includes(search))
        .map((el) => (
          <Todo todo={el} />
        ))}
    </div>
  );
}

// Todo.tsx

import "./todo.css";

const Todo = ({ todo }: any) => (
  <div className="todo">
    <img
      style={{ width: 40, borderRadius: 40 }}
      src={todo.imagesrc}
      alt={todo.name}
    />
    {todo.name}
  </div>
);

export default Todo;

Ответ

Добавьте стабильный key в список, типизируйте Todo и не выводите img без imagesrc. Для поиска можно нормализовать регистр; управляемый input уже реализован правильно.

В App замените список на:

{tasks.filter(task => task.name.toLowerCase().includes(search.trim().toLowerCase()))
  .map(task => <Todo key={task.id} todo={task} />)}

Для Todo:

type Task = { id: string; name: string; imagesrc?: string };
const Todo = ({ todo }: { todo: Task }) => <div className="todo">
  {todo.imagesrc && <img width={40} height={40} style={{ borderRadius: '50%' }}
    src={todo.imagesrc} alt="" />}
  {todo.name}
</div>;

Пустой alt у декоративного аватара не дублирует соседнее имя. Добавьте label для поиска, удалите неиспользуемый импорт useState либо используйте его вместо React.useState. Мемоизация для пяти простых элементов сама по себе не требуется.