Awesome! You passed a prop from a component to a different component, accessed that prop from the receiver component, and rendered it!
You can do more with props
than just display them. You can also use props
to make decisions.
In the code editor, look at the Welcome
component class.
You can tell from this.props.name
on line 5 that Welcome
expects to receive a piece of information called name. However, Welcome
never renders this piece of information! Instead, it uses the information to make a decision.
<Welcome />
instances will render the text WELCOME "2" MY WEB SITE BABYYY!!!!!
, unless the user is Mozart, in which case they will render the more respectfulhello sir it is truly great to meet you
here on the web
.
The passed-in name is not displayed in either case! The name is used to decide what will be displayed. This is a common technique.
Select Home.js and look at the Home
component class. What will <Welcome />
render to the screen?
Instructions
Select Greeting.js.
Look in Greeting
‘s render function. You can see that Greeting
now expects two props: name
and signedIn
.
Notice that this.props.signedIn
is not located inside of a return
statement. This means that Greeting
will never display the value of signedIn
. But Greeting
will use that value to decide whether to display a friendly greeting or “GO AWAY.”
Look at Greeting
until you feel like you understand how it works, and then open App.js.
Inside of App
‘s render function, on line 12, pass <Greeting />
a second prop
of signedIn={false}
.
How rude! I mean, honestly.
In App.js, change the value of signedIn
to make <Greeting />
display a friendly greeting again.