Embedded Files
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?
Instructions
Instructions
1.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}.
2.How rude! I mean, honestly.
In App.js, change the value of signedIn to make <Greeting /> display a friendly greeting again.
Page updated
Report abuse