React not able to dynamically render correct component

Question

This is my App.js

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loggedIn: true}
    }

    render() {
        return (
            <div>
                <Helmet>
                    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
                </Helmet>
                <Wrapper state={this.state.loggedIn}/>
            </div>

        )

    }
}

This passes the loggedIn state down to a wrapper component. This wrapper dynamically determines which component to render. Here's the wrapper code,

class Wrapper extends React.Component {

    render() {
        const MainComp = this.props.state.loggedIn ? Logged : Unlogged;
        return (
            <BrowserRouter>
                <div className="wrapper">
                    <Header state={this.props.state}/>
                    <MainComp state={this.props.state}/>
                </div>
            </BrowserRouter>
        );
    }
}

The issue is even when the loggedIn variable is false the correct component is rendered. However when I change it to true it still continues to render the old or incorrect component. What am I doing wrong here?

Answer 1

You're passing state={this.state.loggedIn} which will be true or false but in your child you get this.props.state.loggedIn which is not defined at all because state === loggedIn

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loggedIn: true}
    }

    render() {
        return (
            <div>
                <Helmet>
                    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
                </Helmet>
                <Wrapper state={this.state}/>
            </div>

        )

    }
}

Call the constructor with props on your child class.

class Wrapper extends React.Component 
{
  constructor(props)
  {
    super(props);
  }

    render() {
        const MainComp = this.props.state.loggedIn ? Logged : Unlogged;
        return (
            <BrowserRouter>
                <div className="wrapper">
                    <Header state={this.props.state}/>
                    <MainComp state={this.props.state}/>
                </div>
            </BrowserRouter>
        );
    }
}