How does parent pass the value to child component?

[RaymondGuo]

As you see, in the OnlyEvens component, the initial value of state is not defined, so it get the update value through in the render part of Controller, right? So the “value” in this line, refers to Controller state? and “this” in {this.state.value} refers to OnlyEvens component? then they implemented passing the value? Could you help me figure this out? Thanks!

  **Your code so far**

class OnlyEvens extends React.Component {
constructor(props) {
  super(props);
}
shouldComponentUpdate(nextProps, nextState) {
  console.log('Should I update?');
  // Change code below this line
  if (nextProps.value % 2 === 0) {
    return true;
  }
  // Change code above this line
}
componentDidUpdate() {
  console.log('Component re-rendered.');
}
render() {
  return <h1>{this.props.value}</h1>;
}
}

class Controller extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    value: 0
  };
  this.addValue = this.addValue.bind(this);
}
addValue() {
  this.setState(state => ({
    value: state.value + 1
  }));
}
render() {
  return (
    <div>
      <button onClick={this.addValue}>Add</button>
      <OnlyEvens value={this.state.value} />
    </div>
  );
}
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Challenge: Optimize Re-Renders with shouldComponentUpdate

Link to the challenge:

freeCodeCamp.org

[tioung]

I’m not sure I understand your question.

When you write <OnlyEvens value={this.state.value} />, you are passing a key to the props object of OnlyEvens and this key is named value and has value 0 (this.state.value of Controller). Therefore, in OnlyEvens, you use this.props.value to retrieve 0.

[kevinSmith]

tioung is correct, but just to remove possible confusion, The two uses of “value” here are not connected. If the parent passes in like this:

<ChildComponent bar={this.state.foo} />

Then the child will get it as this.props.bar. There is nothing wrong with using the same name for both, but it might cause confusion for learners, leading them to think that the names are connected.

[RaymondGuo]

Thanks, get it

[tioung]

There is a free course at Scrimba by Bob Ziroll that explains React really well.

[RaymondGuo]

Thanks, I checked it , it looks really awesome as it is projects driven course, and another question about React is that can we finish a project with react only? so we don’t need to add any html or css files?

[RaymondGuo]

The UI of Scrimba is wonderful

[Sylvant]

I will start a bit more deeper. Classes are a way to create a template for objects to be initialized. The this keyword in them, refers to the object which is gonna be created, owning the functionalities described in the class. In the constructor we define some base props for any objects that are gonna be created by the class. React.Component is a class defined by react, which consist of some basic functionalities and properties for react components. When we extend it, we make our own sub-classes, to add some additional stuff, to use for our own components, while also using of the already react defined stuff, like the render method, state, componentDidMount etc.
When you say this.props.somePropName, this refers to the particular component and reaches in its props object, which holds any properties passed to it. this.state.someStateValue would reach the component state values.

<OnlyEvens value={this.state.value} />

Here this refers to the component where we call the OnlyEvens component - the Controller component, pulling on its state object.

<button onClick={this.addValue}>Add</button>

Here, we call on the Controller component addValue method

return <h1>{this.props.value}</h1>;

This is taken from the OnlyEvens component render method and it reaches to the value attribute, which is passed to the OnlyEvens props object(at the first code snipped i shared)
Be mindful, this is not always properly defined to refer to the component. You have access to the proper this in the component render method, in its constructor method, but on methods you define, such is addValue, this is not what we need, so we “bind” it explicitely in the constructor(where we have the correct this). Once we bind, we gain access to the right this(the particular component), in our custom method.