Step 13
Let's hide the output and show it when user clicks on the zzz
button.
Add the showOutput
variable to the states of App
component:
this.state = {
cycles: [
"11:44 PM",
"1:14 AM",
"2:44 AM",
"4:14 AM",
"5:44 AM",
"7:14 AM",
],
showOutput: false,
};
Pass the showOutput
as a prop to Output
component:
<Output cycles={this.state.cycles} showOutput={this.state.showOutput} />
Update Output
component to show the result based on the showOutput
:
function Output(props) {
return !props.showOutput ? (
<div></div>
) : (
<div>
<p>It takes the average human fourteen minutes to fall asleep.</p>
<p>
If you head to bed right now, you should try to wake up at one of the
following times:
</p>
<ul>
{props.cycles.map((cycle, index) => (
<li key={index}>{cycle}</li>
))}
</ul>
<p>A good night's sleep consists of 5-6 complete sleep cycles.</p>
</div>
);
}
export default Output;
Update App.calcCycle
to flip the showOutput
flag:
// update state
- this.setState({ cycles: cycles });
+ this.setState({ cycles: cycles, showOutput: true });
Save the files and reload the app. You must see the app without the output component:
And the output must be displayed once you click on zzz
button: