How to update react child component from child component?

Question

React

Hello, I have 3 components, the main App.js, where there is state and 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>
    );
  }
}

There is also a component header that takes the this.state.logged value and changes its tags based on this, there is also a login component, from where I want to change the state in app.js so that the header changes (in my vision it should have been like this: I authorize, the header changes), but when this.state.logged changes (from false to true), the header does not change, I understood the reason, because it was drawn at the beginning and was not drawn anymore, how can I make it so that after changing the state header redrawn in app.js?

Answer 1

header does not change, I figured out the reason, because it was drawn at the beginning and was not drawn anymore

in fact, it should change, this is the essence of react, replace
the idiotic ternary with < HeaderComponent logged={this.state.logged}/ > . Not sure if this will help, of course. The problem is somewhere else. console.log does it work?