Update state using function .map() is mutated state?
I'm still new to react and I still don't really understand about mutated the state.
I have seen many posts about this but I do not understand how the mutation process happened so I think it is necessary to ask this.
First i need to know is this called mutated state?
this.setState(prevState=>({
colors:this.state.colors.map((c,i)=>{
return{
original_color:c.original_color,
hex_color:c.hex_color,
isActive:false
}
})
}))
OR
let newData = this.state.colors.map((c,i)=>{
return{
original_color:c.original_color,
hex_color:c.hex_color,
isActive:false
}
})
this.setState({
colors: newData
})
in this case i just want to set all of this value isActive to false
Last
i want to set this value to empty
this.setState({
colors:
})
javascript reactjs
add a comment |
I'm still new to react and I still don't really understand about mutated the state.
I have seen many posts about this but I do not understand how the mutation process happened so I think it is necessary to ask this.
First i need to know is this called mutated state?
this.setState(prevState=>({
colors:this.state.colors.map((c,i)=>{
return{
original_color:c.original_color,
hex_color:c.hex_color,
isActive:false
}
})
}))
OR
let newData = this.state.colors.map((c,i)=>{
return{
original_color:c.original_color,
hex_color:c.hex_color,
isActive:false
}
})
this.setState({
colors: newData
})
in this case i just want to set all of this value isActive to false
Last
i want to set this value to empty
this.setState({
colors:
})
javascript reactjs
1
map and returning like the way you do, doesn't mutate the state in any of the above manner. However in first pattern you need to use it likethis.setState(prevState=>({ colors:prevState.colors.map((c,i)=>{ return{ original_color:c.original_color, hex_color:c.hex_color, isActive:false } }) })). Also mutation means to update the value at the same reference
– Shubham Khatri
Jan 3 at 7:08
how about the last case? @ShubhamKhatri
– user10583820
Jan 3 at 7:11
setState doesn't mutate the original array. it creates a new copy of it.
– Shubham Khatri
Jan 3 at 7:12
Mutated state :this.state.colors = YourObject, In both case you are not doing this, both seems fine
– Mithun G S
Jan 3 at 7:27
add a comment |
I'm still new to react and I still don't really understand about mutated the state.
I have seen many posts about this but I do not understand how the mutation process happened so I think it is necessary to ask this.
First i need to know is this called mutated state?
this.setState(prevState=>({
colors:this.state.colors.map((c,i)=>{
return{
original_color:c.original_color,
hex_color:c.hex_color,
isActive:false
}
})
}))
OR
let newData = this.state.colors.map((c,i)=>{
return{
original_color:c.original_color,
hex_color:c.hex_color,
isActive:false
}
})
this.setState({
colors: newData
})
in this case i just want to set all of this value isActive to false
Last
i want to set this value to empty
this.setState({
colors:
})
javascript reactjs
I'm still new to react and I still don't really understand about mutated the state.
I have seen many posts about this but I do not understand how the mutation process happened so I think it is necessary to ask this.
First i need to know is this called mutated state?
this.setState(prevState=>({
colors:this.state.colors.map((c,i)=>{
return{
original_color:c.original_color,
hex_color:c.hex_color,
isActive:false
}
})
}))
OR
let newData = this.state.colors.map((c,i)=>{
return{
original_color:c.original_color,
hex_color:c.hex_color,
isActive:false
}
})
this.setState({
colors: newData
})
in this case i just want to set all of this value isActive to false
Last
i want to set this value to empty
this.setState({
colors:
})
javascript reactjs
javascript reactjs
asked Jan 3 at 7:04
user10583820
1
map and returning like the way you do, doesn't mutate the state in any of the above manner. However in first pattern you need to use it likethis.setState(prevState=>({ colors:prevState.colors.map((c,i)=>{ return{ original_color:c.original_color, hex_color:c.hex_color, isActive:false } }) })). Also mutation means to update the value at the same reference
– Shubham Khatri
Jan 3 at 7:08
how about the last case? @ShubhamKhatri
– user10583820
Jan 3 at 7:11
setState doesn't mutate the original array. it creates a new copy of it.
– Shubham Khatri
Jan 3 at 7:12
Mutated state :this.state.colors = YourObject, In both case you are not doing this, both seems fine
– Mithun G S
Jan 3 at 7:27
add a comment |
1
map and returning like the way you do, doesn't mutate the state in any of the above manner. However in first pattern you need to use it likethis.setState(prevState=>({ colors:prevState.colors.map((c,i)=>{ return{ original_color:c.original_color, hex_color:c.hex_color, isActive:false } }) })). Also mutation means to update the value at the same reference
– Shubham Khatri
Jan 3 at 7:08
how about the last case? @ShubhamKhatri
– user10583820
Jan 3 at 7:11
setState doesn't mutate the original array. it creates a new copy of it.
– Shubham Khatri
Jan 3 at 7:12
Mutated state :this.state.colors = YourObject, In both case you are not doing this, both seems fine
– Mithun G S
Jan 3 at 7:27
1
1
map and returning like the way you do, doesn't mutate the state in any of the above manner. However in first pattern you need to use it like
this.setState(prevState=>({ colors:prevState.colors.map((c,i)=>{ return{ original_color:c.original_color, hex_color:c.hex_color, isActive:false } }) })). Also mutation means to update the value at the same reference– Shubham Khatri
Jan 3 at 7:08
map and returning like the way you do, doesn't mutate the state in any of the above manner. However in first pattern you need to use it like
this.setState(prevState=>({ colors:prevState.colors.map((c,i)=>{ return{ original_color:c.original_color, hex_color:c.hex_color, isActive:false } }) })). Also mutation means to update the value at the same reference– Shubham Khatri
Jan 3 at 7:08
how about the last case? @ShubhamKhatri
– user10583820
Jan 3 at 7:11
how about the last case? @ShubhamKhatri
– user10583820
Jan 3 at 7:11
setState doesn't mutate the original array. it creates a new copy of it.
– Shubham Khatri
Jan 3 at 7:12
setState doesn't mutate the original array. it creates a new copy of it.
– Shubham Khatri
Jan 3 at 7:12
Mutated state :
this.state.colors = YourObject, In both case you are not doing this, both seems fine– Mithun G S
Jan 3 at 7:27
Mutated state :
this.state.colors = YourObject, In both case you are not doing this, both seems fine– Mithun G S
Jan 3 at 7:27
add a comment |
2 Answers
2
active
oldest
votes
Your state is not mutated in any case. .map() returns a new array. Your state is only mutated when you directly assign it to another value without calling .setState() like so:
this.state.value = anotherValue;
Or:
this.state.value.push(anotherValue)
answered Jan 3 at 8:27
Brian LeBrian Le
835117
add a comment |
Since .map() returns a new array as a result, using it is safe and is not considered a mutation.
Basically, anything that doesn't change the original state or any direct references to it, is not considered a mutation.
answered Jan 3 at 12:29
Bojan IvanacBojan Ivanac
795516
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%2f54017752%2fupdate-state-using-function-map-is-mutated-state%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your state is not mutated in any case. .map() returns a new array. Your state is only mutated when you directly assign it to another value without calling .setState() like so:
this.state.value = anotherValue;
Or:
this.state.value.push(anotherValue)
answered Jan 3 at 8:27
Brian LeBrian Le
835117
add a comment |
Your state is not mutated in any case. .map() returns a new array. Your state is only mutated when you directly assign it to another value without calling .setState() like so:
this.state.value = anotherValue;
Or:
this.state.value.push(anotherValue)
answered Jan 3 at 8:27
Brian LeBrian Le
835117
add a comment |
Your state is not mutated in any case. .map() returns a new array. Your state is only mutated when you directly assign it to another value without calling .setState() like so:
this.state.value = anotherValue;
Or:
this.state.value.push(anotherValue)
answered Jan 3 at 8:27
Brian LeBrian Le
835117
Your state is not mutated in any case. .map() returns a new array. Your state is only mutated when you directly assign it to another value without calling .setState() like so:
this.state.value = anotherValue;
Or:
this.state.value.push(anotherValue)
answered Jan 3 at 8:27
Brian LeBrian Le
835117
answered Jan 3 at 8:27
Brian LeBrian Le
835117
answered Jan 3 at 8:27
Brian LeBrian Le
835117
answered Jan 3 at 8:27
Brian LeBrian Le
835117
835117
add a comment |
add a comment |
Since .map() returns a new array as a result, using it is safe and is not considered a mutation.
Basically, anything that doesn't change the original state or any direct references to it, is not considered a mutation.
answered Jan 3 at 12:29
Bojan IvanacBojan Ivanac
795516
add a comment |
Since .map() returns a new array as a result, using it is safe and is not considered a mutation.
Basically, anything that doesn't change the original state or any direct references to it, is not considered a mutation.
answered Jan 3 at 12:29
Bojan IvanacBojan Ivanac
795516
add a comment |
Since .map() returns a new array as a result, using it is safe and is not considered a mutation.
Basically, anything that doesn't change the original state or any direct references to it, is not considered a mutation.
answered Jan 3 at 12:29
Bojan IvanacBojan Ivanac
795516
Since .map() returns a new array as a result, using it is safe and is not considered a mutation.
Basically, anything that doesn't change the original state or any direct references to it, is not considered a mutation.
answered Jan 3 at 12:29
Bojan IvanacBojan Ivanac
795516
answered Jan 3 at 12:29
Bojan IvanacBojan Ivanac
795516
answered Jan 3 at 12:29
Bojan IvanacBojan Ivanac
795516
answered Jan 3 at 12:29
Bojan IvanacBojan Ivanac
795516
795516
add a comment |
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%2f54017752%2fupdate-state-using-function-map-is-mutated-state%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
1
map and returning like the way you do, doesn't mutate the state in any of the above manner. However in first pattern you need to use it like
this.setState(prevState=>({ colors:prevState.colors.map((c,i)=>{ return{ original_color:c.original_color, hex_color:c.hex_color, isActive:false } }) })). Also mutation means to update the value at the same reference– Shubham Khatri
Jan 3 at 7:08
how about the last case? @ShubhamKhatri
– user10583820
Jan 3 at 7:11
setState doesn't mutate the original array. it creates a new copy of it.
– Shubham Khatri
Jan 3 at 7:12
Mutated state :
this.state.colors = YourObject, In both case you are not doing this, both seems fine– Mithun G S
Jan 3 at 7:27