Как поменять состояние одного компонента, реагируя на событие в другом в React?

Question

[Костя Виноградов]

Проблема такая:
Есть дерево компонентов
App -> Board -> Row -> Section
-> SideBlock -> ResetButton
Задумка такая:
По клику на ResetButton(там только одна кнопка) состояние Board сбрасывается(ну, или она просто перерисовывается с нуля).
Передавать свойства из Board и Row в Section, чтобы работать с ними - я понял как.
А сделать так, чтобы Board реагировал на клик в ResetButton - нет.

В документации было описано, что функцию, которая будет отвечать за смену состояния нужно прописать в App(главном родителе) и передавать вниз до ResetButton. Консоль на такое ругается и говорит, что я где-то передаю объект, а не функцию. Нет такого, там везде по дереву свойством передаётся функция.
Если её описать в ResetButton, то всё ок, оно меняет состояние доски, но, кажется, только для свойства кнопки.
ЧатГПТ и документация не помогли. Не надо тут токсичить, мне реально нужна помощь, ибо я не понимаю чего-то очень простого.

https://pastebin.com/gYY9ER6h - это предложение от чатГПТ, при такой реализации я получаю ошибку, что передаю объект вместо функции
https://pastebin.com/fQXPwHJU - это я пытался хоть как-то изменить состояние Board, но оно, кажется, не меняется. Там есть лишние логи, да, я знаю, что они не отработают, но в js оказалось сложнее дебажить, чем в джаве)

Есть ли способ изменить состояние Board из компонента ResetButton?

Comments

[szQocks]

если ты не знаешь реакт, и не хочешь учить реакт, зачем ты пишешь на реакте ?

ты напрямую изменяешь пропсы

<Board board_state={state} />

const ResetButton = (board_state) => {
    const [state, changeState] = React.useState();
    board_state = state;
}

и говоришь о том что ты пытался якобы что-то там изменить, где ? ты даже не прокинул функцию из app в ResetButton, ах да - функции даже и нет в App, о чём это я

[Костя Виноградов]

szQocks, я просил без токсичности, но, на хабре видимо, без этого никак))
Не собираюсь я отвечать на глупые комментарии вроде "зачем учишь" и т.д.

Но проблема решилась гораздо проще. И функцию в App писать не надо, хватит

const ResetButton = () => {
     const resetClick = () => {
    //немного магии
    }
    return (<button style={{backgroundColor: "gray"}} className="resetBtn" onClick={resetClick}> Reset </button>)
}

Спасибо, что потратил своё время, чтобы не помочь))

Answer 1

[Костя Виноградов]

Может кому поможет. Нет, функцию передавать как свойства между компонентами так и не вышло(хотя должно было). Зато можно передавать свойство.

Теперь в структуре
App -> Board -> Row -> Section
.......\ -> SideBlock -> ResetButton
. Key не передаётся, зато передаётся id.

Это выглядит как:
App(key,id) -> Board -> Row -> Section
.................\ -> SideBlock(id) -> ResetButton(id)
где id - передаётся по структуре ниже.
В ResetButton есть функция, которая по клику изменит id и отрендерит .
И всё, работает) Ну, полагаю, что решение так себе. На досуге подумаю что там с функциями было, может я просто где-то проглядел(скорее всего).

Answer 2

[Пес Барбос]

Рекомендую обернуть все в контекст и использовать его для менеджмента состояния https://kentcdodds.com/blog/how-to-use-react-conte...