FAQ: Child Components Update Their Siblings' props - Display Information in a Sibling Component

Frequently Asked Questions React.js FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Display Information in a Sibling Component” exercise from the lesson “Child Components Update Their Siblings’ props”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part II

FAQs on the exercise Display Information in a Sibling Component

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

Just need some clarification, why are we not using {this.name} instead of {name}

3

For the Sibling component, why is it not necessary to call the constructor method in order to use the props that get passed to it?

4

because name is a normal variable inside your render method,
we are using this. for the class’s attributes only.

1 Like
5

because it is a class component React will do that for you under the hood, but in the function component you will need to have a parameter “props”.

6

Hi,
Still confuse about state and props.
Why do we us this.props.name not this.state.name in Sibling.js???
(The question is due to we us states in Parent.js)
Screen Shot 2022-05-20 at 00.55.45

7

Is it just because we use stateless components in sibling but us state component in parent?

If yes, then how can we choose using state component or stateless component?

Thanks!

8

I cut and paste the identical code (from files in the folder)
Child.js
Parent.compiled.js
Parent.js
Sibling.js
index.html
styles.css

and pasted them into a sandbox (codesandbox) the files are in the exact same locations relative to each other.

It just has a blank white screen. Nothing works.

9

I have a question…

I dont understand how it goes from this.props.onChange(Thinkpiece) from the event handler to triggering the state setter function…

I understand how we’ve passed Thinkpiece through the event object’s name into the Child component:
because through the below code, the const name variable is the drop down selection’s name value.

handleChange(e) {
    const name = e.target.value;
    this.props.onChange(name);
  }

and changeName is the following function:

changeName(newName) {
    this.setState({
      name: newName
    });
  }

Now…i dont understand the next bit…how does changeName get called with “Thinkpiece” passed as the argument at this stage?

Does it somehow automatically know that this.props.onChange(selectedname) is the same as changeName (selectedname) through the existence of the line
<Child onChange={this.changeName} /> ? If so, I don’t see how it can do that?

The onChange property (being the drop down selected name - from the event object) is easy to understand but how does it know to pass that exact same dropdown name into the changeName function? or how does it know to pass it into changeName?