Loading the home page on sign in in React

Question

Here's the structure of my app.

const App = () => {
    // localStorage.setItem('isLoggedIn', false);
    // const isLoggedIn = localStorage.getItem('isLoggedIn');
    const isLoggedIn = true;

    if(isLoggedIn === false){
        return <Content/>
    }
    return <Dashboard/>

};

If the user is logged in, the Dashboard is displayed, otherwise Content . This is the structure of Content .

const Content = (props) => {
    const [isNew, setIsNew] = useState(true);
    return (
        <div className="wrapper">
            {isNew ? <SignUp setIsNew={setIsNew} /> : <SignIn setIsNew={setIsNew} />}
        </div>
    );
};
export default Content;

This conditionally displays either SignIn or SignUp . This is the SignIn component.

class SignIn extends React.Component {
    state={
        email: '',
        password: '',
        isLoggedIn: false
    };
    handleSubmit = async (event) =>{
        event.preventDefault();
        localStorage.setItem('email', this.state.email);
        const access_token = await getAccessToken(this.state.email, this.state.password);
        localStorage.setItem('access_token', access_token);
        localStorage.setItem('isLoggedIn', this.state.isLoggedIn);
        console.log(access_token);
    };


    render() {

        return (
            <div className="sign-up">
                <h1>Sign In</h1>
                <Form onSubmit={this.handleSubmit}>
                    <Form.Group controlId="email">
                        <Form.Label>Email address</Form.Label>
                        <Form.Control type="email" placeholder="Enter email" value={this.state.email}
                                      onChange={event => this.setState({email: event.target.value})}/>
                        <Form.Text className="text-muted">
                        </Form.Text>
                    </Form.Group>

                    <Form.Group controlId="password">
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password" placeholder="Password" value={this.state.password}
                                      onChange={event => this.setState({password: event.target.value})}/>
                    </Form.Group>
                    <Form.Group controlId="formBasicCheckbox">
                        <Form.Check type="checkbox" label="Remember me" value={this.state.isLoggedIn}
                                    onChange={event => this.setState({isLoggedIn: event.target.value})}/>
                    </Form.Group>
                    <Button variant="primary" type="submit" >
                        Sign In
                    </Button>
                    <hr/>
                    <button onClick={() => this.props.setIsNew(true)}>
                        If you don't have an account, Sign Up
                    </button>
                </Form>

            </div>
        )
    }
}

I want to render the Dashboard component on successful SignIn . How can I do this?

Answer 1

You can define a callback function in the props of of Content and SignIn . When the user signs in, you call the function to let Content know and then Content in return calls the callback function in its props (supplied by App ).

Answer 2

Possible way for doing this:

At your handleSubmit function, once the user is successfully signed in, we want to change the state -knowing that changing the state makes the component re-render, we want to use that privilege-, thus:

    handleSubmit = async (event) =>{
        event.preventDefault();
        localStorage.setItem('email', this.state.email);
        const access_token = await getAccessToken(this.state.email, this.state.password);
        localStorage.setItem('access_token', access_token);
        localStorage.setItem('isLoggedIn', this.state.isLoggedIn);
        console.log(access_token);
        // DO THIS BIT::
        this.setState({ isLoggedIn: true });
    };

So, now we now know that the user isLoggedIn , the re-render will occur once that happens, and, inside the render method, we can make an EARLY RETURN statement that will return the Dashboard component instead of the default SignIn stuff.

 render() {
   const { isLoggedIn } = this.state;

   // our early return!
   if(isLoggedIn) return <Dashboard />

   return ( /* this is the default return you already have */ );

 }