Mixing
ReactJs - Passing function as props to setState - Which component's state will be updated?
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?
reactjs
asked Jan 1 at 19:04
Alex5207Alex5207
1838
add a comment |
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?
reactjs
asked Jan 1 at 19:04
Alex5207Alex5207
1838
Did you try it? What happened?
– jonrsharpe
Jan 1 at 19:05
add a comment |
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?
reactjs
asked Jan 1 at 19:04
Alex5207Alex5207
1838
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?
reactjs
reactjs
asked Jan 1 at 19:04
Alex5207Alex5207
1838
asked Jan 1 at 19:04
Alex5207Alex5207
1838
asked Jan 1 at 19:04
Alex5207Alex5207
1838
asked Jan 1 at 19:04
Alex5207Alex5207
1838
asked Jan 1 at 19:04
Alex5207Alex5207
1838
1838
Did you try it? What happened?
– jonrsharpe
Jan 1 at 19:05
add a comment |
Did you try it? What happened?
– jonrsharpe
Jan 1 at 19:05
Did you try it? What happened?
– jonrsharpe
Jan 1 at 19:05
Did you try it? What happened?
– jonrsharpe
Jan 1 at 19:05
add a comment |
1 Answer
1
active
oldest
votes
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
answered Jan 1 at 19:06
Ionut AchimIonut Achim
66436
@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 1 at 19:08
@Alex5207, I corrected the answer and added some links for you
– Ionut Achim
Jan 1 at 19:31
Thanks a lot! Much appreciated
– Alex5207
Jan 1 at 19:46
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998164%2freactjs-passing-function-as-props-to-setstate-which-components-state-will-b%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Jan 1 at 19:06
Ionut AchimIonut Achim
66436
@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 1 at 19:08
@Alex5207, I corrected the answer and added some links for you
– Ionut Achim
Jan 1 at 19:31
Thanks a lot! Much appreciated
– Alex5207
Jan 1 at 19:46
add a comment |
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
answered Jan 1 at 19:06
Ionut AchimIonut Achim
66436
@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 1 at 19:08
@Alex5207, I corrected the answer and added some links for you
– Ionut Achim
Jan 1 at 19:31
Thanks a lot! Much appreciated
– Alex5207
Jan 1 at 19:46
add a comment |
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
answered Jan 1 at 19:06
Ionut AchimIonut Achim
66436
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
answered Jan 1 at 19:06
Ionut AchimIonut Achim
66436
edited Jan 1 at 19:30
answered Jan 1 at 19:06
Ionut AchimIonut Achim
66436
answered Jan 1 at 19:06
Ionut AchimIonut Achim
66436
answered Jan 1 at 19:06
Ionut AchimIonut Achim
66436
66436
@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 1 at 19:08
@Alex5207, I corrected the answer and added some links for you
– Ionut Achim
Jan 1 at 19:31
Thanks a lot! Much appreciated
– Alex5207
Jan 1 at 19:46
add a comment |
@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 1 at 19:08
@Alex5207, I corrected the answer and added some links for you
– Ionut Achim
Jan 1 at 19:31
Thanks a lot! Much appreciated
– Alex5207
Jan 1 at 19:46
@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 1 at 19:08
@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 1 at 19:08
@Alex5207, I corrected the answer and added some links for you
– Ionut Achim
Jan 1 at 19:31
@Alex5207, I corrected the answer and added some links for you
– Ionut Achim
Jan 1 at 19:31
Thanks a lot! Much appreciated
– Alex5207
Jan 1 at 19:46
Thanks a lot! Much appreciated
– Alex5207
Jan 1 at 19:46
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998164%2freactjs-passing-function-as-props-to-setstate-which-components-state-will-b%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Did you try it? What happened?
– jonrsharpe
Jan 1 at 19:05