Sign in
Log inSign up

How do you render content conditionally?

Deactivated User's photo
Deactivated User
·Mar 7, 2018

I'm trying to display a loading modal for two seconds when the application opens and after that time, I want the login modal to reveal itself. Right now, the state is successfully updated from showLoading: true to showLoading:false but showForm:false is not updated to showForm:true.

My initial state is:

state={
  showForm:"false",
  showLoading:"true"
};

I declare this in the componentDidMount function:

const doesShow=this.state.showForm;
    const doesShow2=this.state.showLoading;

    let handleTimeout=()=> {
        this.setState({showForm:!doesShow});
        this.setState({showLoading: !doesShow2});

    };

    setTimeout(handleTimeout,2000);

}

Inside the render method, I have:

let displayForm=null;

if(this.state.showForm) {
    displayForm =
        <div>
            <Header as='h2' style={{color: "white"}} textAlign='center'>
                <Image src={require('../../assets/images/logo.png')}/>
                {' '}Log-in to your account
            </Header>
            <Form size='large'>
                <Segment
                    raised>
                    <Form.Input
                        fluid
                        icon='user'
                        iconPosition='left'
                        placeholder='E-mail address'
                    />
                    <Form.Input
                        fluid
                        icon='lock'
                        iconPosition='left'
                        placeholder='Password'
                        type='password'
                    />
                    <Button color='teal' fluid size='large'>Login</Button>
                </Segment>
            </Form>
            <Message>
                New to us? <a href='#'>Sign Up</a>
            </Message>
        </div>
}


if(this.state.showLoading) {
    displayForm =
        <div>
            <Segment
                raised
                loading>
                <Form.Input
                    fluid
                    icon='user'
                    iconPosition='left'
                    placeholder='E-mail address'
                />
                <Form.Input
                    fluid
                    icon='lock'
                    iconPosition='left'
                    placeholder='Password'
                    type='password'
                />
                <Button color='teal' fluid size='large'>Login</Button>
            </Segment>
        </div>;
}

And Finally, I return

{displayForm}