Learn
Child Components Update Their Siblings' props
Pass the Right props to the Right Siblings
Look at Parent.js in the code editor.
Three things have changed in this file since the last Lesson:
Sibling
has been required on line 4.- A
<Sibling />
instance has been added to the render function on line 27. <Sibling />
and<Child />
have been wrapped in a<div></div>
, since JSX expressions must have only one outer element.
Instructions
1.
Sibling
‘s job is to display the selected name.
That name is stored in Parent
‘s state
. Parent
will have to pass the name to Sibling
, so that Sibling
can display it.
In Parent
‘s render function, pass the name to <Sibling />
:
name={this.state.name}
2.
Child
‘s job is to offer a way to change the chosen name. Not to display it!
In Parent.js, look at lines 25 and 26.
You are passing Child
two pieces of dynamic information:
- The chosen name (
this.state.name
). - A way to change the chosen name (
this.changeName
).
One of those is now unnecessary!
Remove an attribute from <Child />
, so that it receives a way to change the chosen name and nothing more.