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: