Назад к вопросам
Middle
4
Практическое задание: доработать компонент счётчика на React так, чтобы при нажатии на кнопку «Увеличить» значение счётчика увеличивалось на 1 и в историю добавлялась запись об увеличении с новым значением; при нажатии «Уменьшить» — аналогично; при нажатии «Сбросить» — история очищалась.
Компании, где спрашивали
А7-Технологии
Ответ от нейросети
sobes.tech AI
Вот пример компонента React, реализующего счётчик с историей изменений и кнопками «Увеличить», «Уменьшить» и «Сбросить»:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const [history, setHistory] = useState([]);
const increment = () => {
const newCount = count + 1;
setCount(newCount);
setHistory(prev => [...prev, `Увеличено до ${newCount}`]);
};
const decrement = () => {
const newCount = count - 1;
setCount(newCount);
setHistory(prev => [...prev, `Уменьшено до ${newCount}`]);
};
const reset = () => {
setCount(0);
setHistory([]);
};
return (
<div>
<h2>Счётчик: {count}</h2>
<button onClick={increment}>Увеличить</button>
<button onClick={decrement}>Уменьшить</button>
<button onClick={reset}>Сбросить</button>
<h3>История:</h3>
<ul>
{history.map((entry, index) => (
<li key={index}>{entry}</li>
))}
</ul>
</div>
);
}
export default Counter;