Вы можете заставить его работать с крючками, используя useState()
в данном конкретном случае.
В useState()
документации, которую вы можете прочитать далее о том, как используйте также setState()
, который вызывается в вашем коде setButtons
, и почему вам нужно изменить текущее состояние вместо прямого.
Подобно следующему:
const [buttons, setButtons] = useState([
{ id: 1, title: "10 min", minutes: 10, isActive: true },
{ id: 2, title: "1 hour", minutes: 60, isActive: false },
{ id: 3, title: "6 hours", minutes: 360, isActive: false },
{ id: 4, title: "12 hours", minutes: 720, isActive: false },
{ id: 5, title: "24 hours", minutes: 1440, isActive: false }
]);
const clicked = (button) => {
setButtons(prevState => {
return prevState.map(e => {
if (e.id === button.id) { e.isActive = true; }
return e;
})
});
}
Или в clicked
событие, вы можете сделать следующее:
const clicked = (button:any) => {
setButtons((prevState:any) => {
const newState = [...prevState];
newState.find(e => e.id === button.id).isActive = true;
return newState;
});
}
Предлагаемая документация для чтения: Справочник по хукам API
Надеюсь, это поможет!