Junior — Senior
44
Смена значения name при клике кнопки в React‑компоненте
Task condition
В компоненте 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>
);
}
Для решения задачи необходимо:
- Добавить
useState, которое хранит объект{ name: "Антон" }. - Создать обработчик клика, который будет менять
nameна"Александр". - Привязать этот обработчик к новой кнопке в JSX.
- При желании вывести текущее значение
nameрядом с кнопкой, чтобы увидеть изменение.