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
}