Step 9

The Output component does not generate the sleep cycle hours. It must receive it. Let's pass this data from App component to Output component.

Move the cycles from Output.js to App.js:

import Zzz from "./Zzz.js";
import Output from "./Output.js";

function App() {
  const cycles = [
    "11:44 PM",
    "1:14 AM",
    "2:44 AM",
    "4:14 AM",
    "5:44 AM",
    "7:14 AM",
  ];

  return (
    <div>
      <p>If you go to bed NOW, you should wake up at...</p>
      <Zzz />
      <Output cycles={cycles} />
    </div>
  );
}

export default App;

Notice how cycles is passed to Output component:

<Output cycles={cycles} />

In React jargons, cycles is called "props". Just like we use arguments to pass data to functions, we use props to pass data to React Components.

A prop is any input that you pass to a React component.

Just like an HTML attribute, a prop is declared as name and value pair when added to a Component. (Props is short for properties - Good read: What is “Props” and how to use it in React?.)

We now update the Output.js:

function Output(props) {
  return (
    <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;

The "props" passed to a Component are collected as name/value properties in one object called props. If you have a function component, the props will be passed to the function as an argument:

function Output(props) {
  // to get the "cycles" array use props.cycles
}

Aside: If you use Class component, the props will be passed to its constructor as an argument:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  // you can use this.props anywhere in this class
  // to get the "cycles" array use this.props.cycles
}