Как обновить дочернюю компоненту react из дочерней компоненты?

Question

[AlllLlllA]

Здравствуйте, у меня есть 3 компоненты, главная App.js, где есть state и route:

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      logged: false
    }
  }
  async LogOrLogout(loggin){
    await this.setState({logged: loggin});
    console.log(this.state);
  }
  render(){
    return (
      <BrowserRouter>
        <div className="app">
          {(this.state.logged) ? <HeaderComponent logged={true}/> : <HeaderComponent logged={false}/>}
          <Route exact path='/' component={MainPageUnLogComponent}/>
          <Route path='/main-menu' component={MainPageLogComponent}/>
          <Route path='/login' component={() => <LoginComponent login={loggin => this.LogOrLogout(loggin)}/>}/>
          <Route path='/registration' component={RegisterComponent}/>
        </div>
      </BrowserRouter>
    );
  }
}

Есть так же header компонента, которая принимает значение this.state.logged и на основе этого меняет свои теги, есть ещё компонента login, откуда я хочу менять state в app.js, чтобы менялся header (в моём видении это должно было быть так: авторизуюсь, header меняется), но при изменении this.state.logged (c false на true), header не меняется, я понял в чём причина, ведь он отрисовался вначале и не отрисовывался больше, как мне сделать так, что бы после изменения state в app.js перерисовывался header?

Answer 1

[Alexandroppolus]

header не меняется, я понял в чём причина, ведь он отрисовался вначале и не отрисовывался больше

вообще-то он должен меняться, в этом суть реакта

замени идиотский тернарник на < HeaderComponent logged={this.state.logged}/ > . Не факт, что это поможет, конечно. Проблема где-то ещё. console.log точно срабатывает?

Comments

[AlllLlllA]

Ох, тернарник я уже от безысходности написал, 3 день не могу решить проблему просто, console.log работает

[Alexandroppolus]

AlllLlllA, а console.log(props.logged) в рендере HeaderComponent что пишет?

[AlllLlllA]

В HeaderComponent Он пишет один раз false(когда страница загрузилась), после чего он вообще никак и ни на что не реагирует.
Немного не понял, куда этот render пихать, в LoginComponent или куда то ещё? (и в этой строке "/>" случайно не лишнее?)