How this.setState() (react.Component method) has access of his child's class state?

Question

Actually, I am learning to React JS, But I have confusion that how can a parent's class method has access to his child's class state. I searched a lot on this topic but in object-oriented programming parent class hasn't access to his child's properties (state). But in react js how setState() has to access to his child's class properties (state). It can be a stupid question please tell me how it happens?

Answer 1

Don't worry, this is a great question.

Props are passed by reference!

Here are some great answers from a StackOverflow post that answer your question with more specificity.

In reactjs, are props pass by value or pass by reference?

I think some potential nuance I can offer is that React emphasizes composition over inheritance. You should think of it as your parent component being composed of the child components. While the child components are given access to the parent state, they aren't inheriting it.

Answer 2

Understanding the Parent Child structure through the Component API may help, should you want to clear any confusion. Since you have mentioned Class Components, let me illustrate an example with the same.

You may send props from a Parent to a child through defining a property within the JSX insertion -

<Child uniqueProp="Text sent to Child" />

Conversely, it is tricky to access Child data in a Parent component. You'll have to follow these steps -

1. Define a callback function in the Parent Component to get data from the Child Component.
2. Pass the callback function in the Parent Component as a prop to the Child Component.
3. The Child Component calls the Parent callback function using props.

Example -

Parent Component

class Parent extends React.Component {      

  constructor(props) {
    super(props);
    this.state = {
      text: "Original Text"
    }
  }    

  handleCallback = (value) => {
    this.setState({ text: value })
  }    

  render() {
    return (
      <div>
        <Child changeText={this.handleCallback} />
        {this.state.text}
      </div>
    )
  }

}

Child Component

class Child extends React.Component { 

  render() {
    return (
      <div>
        <button onClick={() => this.props.changeText("Data from child")}>
          Button
        </button>
      </div>
    )
  }

}

The reason it is set up that way is because props are passed by reference. Should you choose to change the parent's state traditionally state = {"something"} instead of setState({"something"}) , the object will be modified in the child component as well but there will not be a re-render cycle. The user won't see UI changes until a manual refresh.

And when you use setState to change the parent's state (standard practice), the re-render cycle will be triggered as expected and the Child Component will reflect the UI changes.

Note : Be warned, the use of functional components is almost defacto now. Makes life easy with integrations of Hooks and data stores such as Redux in my opinion.