Display Information in a Sibling Component

You’re on the last step!

You’ve passed the name down to <Sibling /> as a prop. Now <Sibling /> has to display that prop.

Instructions

1.Select Sibling.js.

Notice that Sibling doesn’t use any dynamic information at all. Every time that Sibling renders, it will always look exactly the same. That’s not what you want!

On line 5, declare a new variable called name. Set name equal to this.props.name. You’ll use it in the next checkpoint.

2.Inside of the render function’s return statement, there are three instances of the word Frarthur.

You want to replace each instance of Frarthur with whatever the chosen name is.

Replace each Frarthur with {name}. Click Run. Try selecting a new name from the dropdown menu.