React child component not re-rendering on state change
I realize questions like this have been asked before but from reading several Q&As here it seems like in a lot of cases people are recommending using componentWillUpdate but from my (very) basic understanding of React, if I setState() won't child components re-render if they are affected?
This is my App component (showing the State being set, the function to update the state handleClick, the Display component (which shows the current input from state) and a Button component which shows a number and is passed the function handleClick:
this.State = {
calcValue: 0
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(val) {
this.setState({ calcValue: val })
}
render() {
return(
<div class="calcBody">
<Display currentValue={this.State.calcValue} />
<h1>Calculator</h1>
<div class="numPad">
<Button btn="num col1" operator={1} handleClick={this.handleClick.bind(this)} />
This is the Button component:
class Button extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
/*the button when clicked takes the handleClick function and passes it props based on whatever number is pressed */
<button onClick={() => this.props.handleClick(this.props.operator)}>
<div class={this.props.btn}>{this.props.operator}</div>
</button>
)
}
}
Lastly, this is the Display component:
class Display extends React.Component {
constructor(props){
super(props);
this.props = {
currentValue: this.props.currentValue
}
}
render() {
return(
<h1>{this.props.currentValue}</h1>
);
}
}
I'm wondering why this does not update when handleClick(val) is called?
javascript reactjs
asked Nov 23 '18 at 1:26
tfantinatfantina
307413
add a comment |
I realize questions like this have been asked before but from reading several Q&As here it seems like in a lot of cases people are recommending using componentWillUpdate but from my (very) basic understanding of React, if I setState() won't child components re-render if they are affected?
This is my App component (showing the State being set, the function to update the state handleClick, the Display component (which shows the current input from state) and a Button component which shows a number and is passed the function handleClick:
this.State = {
calcValue: 0
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(val) {
this.setState({ calcValue: val })
}
render() {
return(
<div class="calcBody">
<Display currentValue={this.State.calcValue} />
<h1>Calculator</h1>
<div class="numPad">
<Button btn="num col1" operator={1} handleClick={this.handleClick.bind(this)} />
This is the Button component:
class Button extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
/*the button when clicked takes the handleClick function and passes it props based on whatever number is pressed */
<button onClick={() => this.props.handleClick(this.props.operator)}>
<div class={this.props.btn}>{this.props.operator}</div>
</button>
)
}
}
Lastly, this is the Display component:
class Display extends React.Component {
constructor(props){
super(props);
this.props = {
currentValue: this.props.currentValue
}
}
render() {
return(
<h1>{this.props.currentValue}</h1>
);
}
}
I'm wondering why this does not update when handleClick(val) is called?
javascript reactjs
asked Nov 23 '18 at 1:26
tfantinatfantina
307413
You set operator to1, so even though you update your state with1each timeButtonis clicked the props that get passed toDisplaynever change. i.e.this.props.currentValueis always1
– Hunter McMillen
Nov 23 '18 at 1:34
Hey thanks for the response, I think I'm starting to get it butthis.props.currentValuein Display is always 0 (which is what the original state is set to) if it turned to 1 when the button in Button was pressed then this would make sense but why does that not change?
– tfantina
Nov 23 '18 at 1:49
Sorry, I didn't see that your initial state was 0. I would try logging out whatvalis withinhandleClick. I bet it is something you aren't expecting
– Hunter McMillen
Nov 23 '18 at 1:52
Thanks for your help @HunterMcMillen!
– tfantina
Nov 23 '18 at 2:04
add a comment |
I realize questions like this have been asked before but from reading several Q&As here it seems like in a lot of cases people are recommending using componentWillUpdate but from my (very) basic understanding of React, if I setState() won't child components re-render if they are affected?
This is my App component (showing the State being set, the function to update the state handleClick, the Display component (which shows the current input from state) and a Button component which shows a number and is passed the function handleClick:
this.State = {
calcValue: 0
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(val) {
this.setState({ calcValue: val })
}
render() {
return(
<div class="calcBody">
<Display currentValue={this.State.calcValue} />
<h1>Calculator</h1>
<div class="numPad">
<Button btn="num col1" operator={1} handleClick={this.handleClick.bind(this)} />
This is the Button component:
class Button extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
/*the button when clicked takes the handleClick function and passes it props based on whatever number is pressed */
<button onClick={() => this.props.handleClick(this.props.operator)}>
<div class={this.props.btn}>{this.props.operator}</div>
</button>
)
}
}
Lastly, this is the Display component:
class Display extends React.Component {
constructor(props){
super(props);
this.props = {
currentValue: this.props.currentValue
}
}
render() {
return(
<h1>{this.props.currentValue}</h1>
);
}
}
I'm wondering why this does not update when handleClick(val) is called?
javascript reactjs
asked Nov 23 '18 at 1:26
tfantinatfantina
307413
I realize questions like this have been asked before but from reading several Q&As here it seems like in a lot of cases people are recommending using componentWillUpdate but from my (very) basic understanding of React, if I setState() won't child components re-render if they are affected?
This is my App component (showing the State being set, the function to update the state handleClick, the Display component (which shows the current input from state) and a Button component which shows a number and is passed the function handleClick:
this.State = {
calcValue: 0
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(val) {
this.setState({ calcValue: val })
}
render() {
return(
<div class="calcBody">
<Display currentValue={this.State.calcValue} />
<h1>Calculator</h1>
<div class="numPad">
<Button btn="num col1" operator={1} handleClick={this.handleClick.bind(this)} />
This is the Button component:
class Button extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
/*the button when clicked takes the handleClick function and passes it props based on whatever number is pressed */
<button onClick={() => this.props.handleClick(this.props.operator)}>
<div class={this.props.btn}>{this.props.operator}</div>
</button>
)
}
}
Lastly, this is the Display component:
class Display extends React.Component {
constructor(props){
super(props);
this.props = {
currentValue: this.props.currentValue
}
}
render() {
return(
<h1>{this.props.currentValue}</h1>
);
}
}
I'm wondering why this does not update when handleClick(val) is called?
javascript reactjs
javascript reactjs
asked Nov 23 '18 at 1:26
tfantinatfantina
307413
asked Nov 23 '18 at 1:26
tfantinatfantina
307413
asked Nov 23 '18 at 1:26
tfantinatfantina
307413
asked Nov 23 '18 at 1:26
tfantinatfantina
307413
asked Nov 23 '18 at 1:26
tfantinatfantina
307413
307413
You set operator to1, so even though you update your state with1each timeButtonis clicked the props that get passed toDisplaynever change. i.e.this.props.currentValueis always1
– Hunter McMillen
Nov 23 '18 at 1:34
Hey thanks for the response, I think I'm starting to get it butthis.props.currentValuein Display is always 0 (which is what the original state is set to) if it turned to 1 when the button in Button was pressed then this would make sense but why does that not change?
– tfantina
Nov 23 '18 at 1:49
Sorry, I didn't see that your initial state was 0. I would try logging out whatvalis withinhandleClick. I bet it is something you aren't expecting
– Hunter McMillen
Nov 23 '18 at 1:52
Thanks for your help @HunterMcMillen!
– tfantina
Nov 23 '18 at 2:04
add a comment |
You set operator to1, so even though you update your state with1each timeButtonis clicked the props that get passed toDisplaynever change. i.e.this.props.currentValueis always1
– Hunter McMillen
Nov 23 '18 at 1:34
Hey thanks for the response, I think I'm starting to get it butthis.props.currentValuein Display is always 0 (which is what the original state is set to) if it turned to 1 when the button in Button was pressed then this would make sense but why does that not change?
– tfantina
Nov 23 '18 at 1:49
Sorry, I didn't see that your initial state was 0. I would try logging out whatvalis withinhandleClick. I bet it is something you aren't expecting
– Hunter McMillen
Nov 23 '18 at 1:52
Thanks for your help @HunterMcMillen!
– tfantina
Nov 23 '18 at 2:04
You set operator to
1, so even though you update your state with 1 each time Button is clicked the props that get passed to Display never change. i.e. this.props.currentValue is always 1– Hunter McMillen
Nov 23 '18 at 1:34
You set operator to
1, so even though you update your state with 1 each time Button is clicked the props that get passed to Display never change. i.e. this.props.currentValue is always 1– Hunter McMillen
Nov 23 '18 at 1:34
Hey thanks for the response, I think I'm starting to get it but
this.props.currentValue in Display is always 0 (which is what the original state is set to) if it turned to 1 when the button in Button was pressed then this would make sense but why does that not change?– tfantina
Nov 23 '18 at 1:49
Hey thanks for the response, I think I'm starting to get it but
this.props.currentValue in Display is always 0 (which is what the original state is set to) if it turned to 1 when the button in Button was pressed then this would make sense but why does that not change?– tfantina
Nov 23 '18 at 1:49
Sorry, I didn't see that your initial state was 0. I would try logging out what
val is within handleClick. I bet it is something you aren't expecting– Hunter McMillen
Nov 23 '18 at 1:52
Sorry, I didn't see that your initial state was 0. I would try logging out what
val is within handleClick. I bet it is something you aren't expecting– Hunter McMillen
Nov 23 '18 at 1:52
Thanks for your help @HunterMcMillen!
– tfantina
Nov 23 '18 at 2:04
Thanks for your help @HunterMcMillen!
– tfantina
Nov 23 '18 at 2:04
add a comment |
1 Answer
1
active
oldest
votes
You're defining state as this.State which is incorrect it should be lowercased: this.state:
this.state = {
calcValue: 0
}
Also, this line:
this.props = {
currentValue: this.props.currentValue
}
doesn't have much sense, as props are passed outside, component shouldn't change them.
answered Nov 23 '18 at 1:57
AlexAlex
3,335621
Thanks, @Alex, this worked! I will remove that prop declaration in the component, being new to React I am still struggling to figure out what's required and whats not.
– tfantina
Nov 23 '18 at 2:04
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%2f53439669%2freact-child-component-not-re-rendering-on-state-change%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
You're defining state as this.State which is incorrect it should be lowercased: this.state:
this.state = {
calcValue: 0
}
Also, this line:
this.props = {
currentValue: this.props.currentValue
}
doesn't have much sense, as props are passed outside, component shouldn't change them.
answered Nov 23 '18 at 1:57
AlexAlex
3,335621
Thanks, @Alex, this worked! I will remove that prop declaration in the component, being new to React I am still struggling to figure out what's required and whats not.
– tfantina
Nov 23 '18 at 2:04
add a comment |
You're defining state as this.State which is incorrect it should be lowercased: this.state:
this.state = {
calcValue: 0
}
Also, this line:
this.props = {
currentValue: this.props.currentValue
}
doesn't have much sense, as props are passed outside, component shouldn't change them.
answered Nov 23 '18 at 1:57
AlexAlex
3,335621
Thanks, @Alex, this worked! I will remove that prop declaration in the component, being new to React I am still struggling to figure out what's required and whats not.
– tfantina
Nov 23 '18 at 2:04
add a comment |
You're defining state as this.State which is incorrect it should be lowercased: this.state:
this.state = {
calcValue: 0
}
Also, this line:
this.props = {
currentValue: this.props.currentValue
}
doesn't have much sense, as props are passed outside, component shouldn't change them.
answered Nov 23 '18 at 1:57
AlexAlex
3,335621
You're defining state as this.State which is incorrect it should be lowercased: this.state:
this.state = {
calcValue: 0
}
Also, this line:
this.props = {
currentValue: this.props.currentValue
}
doesn't have much sense, as props are passed outside, component shouldn't change them.
answered Nov 23 '18 at 1:57
AlexAlex
3,335621
answered Nov 23 '18 at 1:57
AlexAlex
3,335621
answered Nov 23 '18 at 1:57
AlexAlex
3,335621
answered Nov 23 '18 at 1:57
AlexAlex
3,335621
3,335621
Thanks, @Alex, this worked! I will remove that prop declaration in the component, being new to React I am still struggling to figure out what's required and whats not.
– tfantina
Nov 23 '18 at 2:04
add a comment |
Thanks, @Alex, this worked! I will remove that prop declaration in the component, being new to React I am still struggling to figure out what's required and whats not.
– tfantina
Nov 23 '18 at 2:04
Thanks, @Alex, this worked! I will remove that prop declaration in the component, being new to React I am still struggling to figure out what's required and whats not.
– tfantina
Nov 23 '18 at 2:04
Thanks, @Alex, this worked! I will remove that prop declaration in the component, being new to React I am still struggling to figure out what's required and whats not.
– tfantina
Nov 23 '18 at 2:04
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%2f53439669%2freact-child-component-not-re-rendering-on-state-change%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
You set operator to
1, so even though you update your state with1each timeButtonis clicked the props that get passed toDisplaynever change. i.e.this.props.currentValueis always1– Hunter McMillen
Nov 23 '18 at 1:34
Hey thanks for the response, I think I'm starting to get it but
this.props.currentValuein Display is always 0 (which is what the original state is set to) if it turned to 1 when the button in Button was pressed then this would make sense but why does that not change?– tfantina
Nov 23 '18 at 1:49
Sorry, I didn't see that your initial state was 0. I would try logging out what
valis withinhandleClick. I bet it is something you aren't expecting– Hunter McMillen
Nov 23 '18 at 1:52
Thanks for your help @HunterMcMillen!
– tfantina
Nov 23 '18 at 2:04