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

Требования

Компонент отображает список чисел и их квадратные значения.
Кнопка Add должна добавлять введённое пользователем число в массив.
Кнопка delete должна удалять выбранный элемент из массива.
При нажатии на кнопку сортировки меняется порядок отображения (по возрастанию/убыванию).
Дополнительно: вывести подсказку над иконкой сортировки.
Дополнительно: посчитать и отобразить квадратную сумму всех элементов.

Исходный код

import "./styles.css";
import React from "react";
import orderBy from "lodash/orderBy";

const ascIcon = "↑";
const descIcon = "↓";

/*
 * Компонент отрисовывающий элементы списка и их квадратное значение,
 * Кнопка add должна добавлять значение в массив
 * Кнопка delete должна удалять значение из массива
 *
 * Задание — поменять функционал
 * Доп. задание: Получать над символикой title.
 * Доп. задание: Подсчёт квадратичной суммы.
 */

export default function App() {
  let array = [1, 2, 3, 4, 5, 6];

  const [sortDirection, setSortDirection] = React.useState<any>("asc");
  const [inputValue, setInputValue] = React.useState("");
  let sum = 0;

  array.map(i => (sum += i));

  const handleChangeInput = (e: React.FormEvent<HTMLInputElement>) => {
    setInputValue(e.currentTarget.value);
  };

  const handleAddItem = () => {
    array.push(Number(inputValue));
  };

  const handleRemoveItem = (id: number) => {
    array = array.filter((item) => item !== id);
  };

  const handleChangeSort = () => {
    const newSorting = sortDirection === "asc" ? "desc" : "asc";
    setSortDirection(newSorting);
  };

  return (
    <div className="App">
      <input value={inputValue} onChange={handleChangeInput} />
      <button onClick={handleAddItem}>Add</button>

      <button onClick={handleChangeSort}>
        {sortDirection === "asc" ? ascIcon : descIcon}
      </button>

      {orderBy(array, undefined, sortDirection).map((i) => {
        return (
          <div key={i}>
            {i} {i * i}
            <button onClick={() => handleRemoveItem(i)}>delete</button>
          </div>
        );
      })}

      <span>Общая сумма элементов: {sum}</span>
    </div>
  );
}

Отладка React‑компонента: исправление логики работы списка