How do you render content conditionally?
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}