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 respectful
hello 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?
Greeting‘s render function. You can see that
Greeting now expects two props:
this.props.signedIn is not located inside of a
return statement. This means that
Greeting will never display the value of
Greeting will use that value to decide whether to display a friendly greeting or “GO AWAY.”
Greeting until you feel like you understand how it works, and then open App.js.
App‘s render function, on line 12, pass
<Greeting /> a second
How rude! I mean, honestly.
In App.js, change the value of
signedIn to make
<Greeting /> display a friendly greeting again.