how do i change my menu links before component is loaded to page Reactjs

Question

I am trying to change the menu before the component loads, so i can display a diferent menu according to the user login. I have tried this way with componentWillMount, I have tried setting timeouts when i login one of the two categories of users.

I would like to either have the page reload after I redirect a user when he logs in or a way to change the variable links before the components loads to the page.

class Navbar extends Component {
state = {
    links: <SignedOutLinks />
}

checkMenu() {
    let links = <SignedOutLinks />;
    if (this.props.toxiCookie === undefined && this.props.ajudanteCookie === undefined) {
        this.setState({
            links: <SignedOutLinks />
        })
    }
    if (this.props.toxiCookie === 'loginToxiTrue' && this.props.ajudanteCookie === undefined) {
        this.setState({
            links: <SignedInLinksAddicts />
        })
    }
    if (this.props.toxiCookie === undefined && this.props.ajudanteCookie === 'loginAjudanteTrue') {
        this.setState({
            links: <SignedInLinksAjudantes />
        })
    }
}

componentWillMount() {
    this.checkMenu();
}


render() {
    return (
        <nav className="nav-wrapper orange lighten-2">
            <div className="container">
                <Link to='/' className='brand-logo'>Home</Link>
                {this.state.links}
            </div>
        </nav>
    );
}
}

This is one of my logins form submit handler:loginT.js

handleSubmit = (e) => {


    event.preventDefault();


    let data = JSON.stringify({
        numero_telefone: this.state.numero_tele,
        password: this.state.password
    });
    let url = 'http://localhost:4000/loginViciados';
    const response = axios.post(url, data, { headers: { "Content-Type": "application/json" } })
        .then(res => {
            if (res.data.data.length === 0) {
                this.setState({ failLogin: 'Num.Telefone ou Password incorrectos!' });
            } else {
                Cookies.set("toxi", "loginToxiTrue", { expires: 7 });
                const ajudante = Cookies.get('ajudante');
                Cookies.remove('ajudante');
                console.log(`welcome ${res.data.data[0].nome_viciado} ${res.data.data[0].apelido}`);


                this.setState({
                    failLogin: '',
                    redirect: true
                })


            }
        })
        .catch(error => console.log(error.response));

}

Answer 1

Do not put your links component in state. It's better to conditionally render component like this :

{myCondition && <MyComponent />}

In your case, the biggest challenge you have (and we all had that challenge while learning React I think) is to manage global state in your app. You menu should not know how to detect if the user is logged in or not. You'll need that logic in a lot of your component so you'll have to duplicate your cookie logic everywhere.

To achieve this, you could use context or a store (Redux is a good start). With Redux, you would be able to share global state (user, language, etc) to every components.

NOTE : Also, I don't think you should create one component per use case in your menu ;)

Answer 2

Did you try using componentDidUpdate? this should catch if those props change.

  componentDidUpdate (prevProps) {
    const { toxiCookie, ajudanteCookie } = this.props;
    if (prevProps.toxiCookie !== toxiCookie || prevProps.ajudanteCookie !== ajudanteCookie) {
      this.checkMenu();
    }
  }