The issue is because in componentDidUpdate you are calling this.props.uponSuccessfulLogin() where only loginSuccess is getting updated but login is still true. Hence even though you provided valid credentials even after getting 200 you are still seeing Login Page.

Make below changes to the parent component method uponSuccessfulLogin

uponSuccessfulLogin() { this.setState(() => ({loginSuccess: true, signup: false, login: false})) } 

By doing so, since signup and login will be set to false and then Home component will be visible.

Also in your loginForm.js component, return null if you doesn't want to render anything.

render() { if (!this.state.loginSuccess){ //..rest of your code for displaying Login form } else return null; } 

The issue is because in componentDidUpdate you are calling this.props.uponSuccessfulLogin() where only loginSuccess is getting updated but login is still true. Hence even though you provided valid credentials even after getting 200 you are still seeing Login Page.

Make below changes to the parent component method uponSuccessfulLogin

uponSuccessfulLogin() { this.setState(() => ({loginSuccess: true, signup: false, login: false})) } 

By doing so, since signup and login will be set to false and then Home component will be visible.

Also in your loginForm.js component, return null if you doesn't want to render anything.

authenticate(e) { e.preventDefault(); //..rest of the code } onLoginSubmitButton(e) { this.authenticate(e); } render() { if (!this.state.loginSuccess){ //..rest of your code for displaying Login form } else return null; } 

Hope this helps.