ReactJs - Passing function as props to setState - Which component's state will be updated?

Question

Let's say you have a Parent component which defines a method:

    class Parent extends Component {
     handleX() {
       this.setState({ x: true });
     }
   }

If I pass this function as props to Child and call it on for example a button click, which state will be updated - Child or Parent? What is the correct way to use this?

Did you try it? What happened? – jonrsharpe Jan 01 '19 at 19:05 — jonrsharpe, Jan 01 '19 at 19:05

Ionut Achim · Accepted Answer · 2019-01-01T19:30:32.320

1

Neither. If you want to update the parent state, you need to either hard-bind it or change it to a public class field (handleX = () => { this.setState({ x: true })}). But you will not be able to update the child state because of how this works.

handleX = () => {
  this.setState({ x: true })
}

or

<Child handleX={handleX.bind(this)} />

or

<Child handleX={() => handleX()} />

If you want to learn more about how this works in JS, refer to this question, or google it, there are tons of articles out there. Personally, I found Kyle's You don't know JS - This and object prototypes more than helpful

edited Jan 01 '19 at 19:30

answered Jan 01 '19 at 19:06

Ionut Achim

937
5
10

@lonut - Thanks for your answer! I am having a difficult time understanding this bining of this in javascript - Do you have any good places for a thorough explanation? – Alex5207 Jan 01 '19 at 19:08
@Alex5207, I corrected the answer and added some links for you – Ionut Achim Jan 01 '19 at 19:31
Thanks a lot! Much appreciated – Alex5207 Jan 01 '19 at 19:46

ReactJs - Passing function as props to setState - Which component's state will be updated?

1 Answers1