Смена значения name при клике кнопки в React‑компоненте

Условие

В компоненте App, написанном на React, нужно добавить кнопку и состояние — объект, содержащий поле name. Изначальное значение этого поля должно быть строкой «Антон». При нажатии на кнопку значение name должно измениться на «Александр». При этом остальная логика компонента сохраняется без изменений.

import { useCallback, useEffect, useMemo, useState } from "react";

export function App() {
  const [count, setCount] = useState(0);

  const btnClick = () => {
    setCount(count + 1);
  };

  const handleBtnClick = useCallback(() => {
    btnClick();
  }, []);

  // function btnClick2() {
  //   const bigArr = Array(1000000).fill("user");
  //   bigArr.forEach((el, i, arr) => {
  //     arr[i] = arr[i] + i;
  //   });
  //   setCount(count + 1);
  // }

  return (
    <div>
      <button onClick={handleBtnClick}>{count}</button>
      {/* <button onClick={btnClick2}>Compute Heavy</button> */}
      <div />
      <input type="text" />
    </div>
  );
}

Для решения задачи необходимо:

1. Добавить useState, которое хранит объект { name: "Антон" }.
2. Создать обработчик клика, который будет менять name на "Александр".
3. Привязать этот обработчик к новой кнопке в JSX.
4. При желании вывести текущее значение name рядом с кнопкой, чтобы увидеть изменение.

Ответ

Добавьте отдельное состояние user и обновляйте name через новый объект. Остальной JSX сохраните; обработчик новой кнопки не должен мутировать прежний объект состояния.

Внутри App до return:

const [user, setUser] = useState({ name: 'Антон' });
const changeName = () => setUser(previous => ({ ...previous, name: 'Александр' }));

В существующий div добавьте:

<button type="button" onClick={changeName}>{user.name}</button>

После нажатия надпись станет Александр. Счётчик и закомментированный блок не требуется менять в рамках этой правки. Отдельное замечание ревью: старый handleBtnClick с [] хранит начальное значение count; его исправление — функциональный setCount, если устранять и этот независимый дефект.