React state : update an index of array objects without explicitly specifying keys
I have an array of objects in my state. I want to update the last object in array. But I don't want to explicitly mention the keys when updating the object.
This is how my code looks right now.
import React from 'react'
import update from 'immutability-helper'
class Container extends React.Component {
state = { queue: [
{title: 'title 1', message: 'message 1', dismissible: false},
{title: 'title 2', message: 'message 2', dismissible: true},
{title: 'title 3', message: 'message 3', dismissible: false},
] }
updateLast = (contents) => {
this.setState({
queue: update(this.state.queue, {
[this.state.queue.length-1]: {
title: {$set: contents.title},
message: {$set: contents.message},
dismissible: {$set: contents.dismissible},
},
}),
})
}
render() {
return (
<div className="notifications">
{this.state.queue.map((notification, key) => (
<Notification key={key} {...notification} />
))}
</div>
)
}
As you can see, in the update method I am specifying the object keys title, message etc. explicitly.
Is there some way I can update all the keys of the object using map or spread ... operator?
reactjs state spread-syntax
asked Dec 31 '18 at 2:57
vikmalhotravikmalhotra
6,0091982132
add a comment |
I have an array of objects in my state. I want to update the last object in array. But I don't want to explicitly mention the keys when updating the object.
This is how my code looks right now.
import React from 'react'
import update from 'immutability-helper'
class Container extends React.Component {
state = { queue: [
{title: 'title 1', message: 'message 1', dismissible: false},
{title: 'title 2', message: 'message 2', dismissible: true},
{title: 'title 3', message: 'message 3', dismissible: false},
] }
updateLast = (contents) => {
this.setState({
queue: update(this.state.queue, {
[this.state.queue.length-1]: {
title: {$set: contents.title},
message: {$set: contents.message},
dismissible: {$set: contents.dismissible},
},
}),
})
}
render() {
return (
<div className="notifications">
{this.state.queue.map((notification, key) => (
<Notification key={key} {...notification} />
))}
</div>
)
}
As you can see, in the update method I am specifying the object keys title, message etc. explicitly.
Is there some way I can update all the keys of the object using map or spread ... operator?
reactjs state spread-syntax
asked Dec 31 '18 at 2:57
vikmalhotravikmalhotra
6,0091982132
what do you mean bykeys? Is that a property inside thequeueobject?
– Thinker
Dec 31 '18 at 3:13
@Thinkerqueueis an array of objects. They keys are the object properties. I am updating my question with the contents ofqueue..
– vikmalhotra
Dec 31 '18 at 3:29
@vikramalhotra may I know the reason of changing the key of the object? The key is a unique ID (from my understanding), so how you want to edit the key and why do you want to edit it?
– Thinker
Dec 31 '18 at 3:33
@Thinker oh no. I don't want to change the keys. I want to update the values. But I don't want to use the keys explicitly to update the values.
– vikmalhotra
Dec 31 '18 at 3:37
add a comment |
I have an array of objects in my state. I want to update the last object in array. But I don't want to explicitly mention the keys when updating the object.
This is how my code looks right now.
import React from 'react'
import update from 'immutability-helper'
class Container extends React.Component {
state = { queue: [
{title: 'title 1', message: 'message 1', dismissible: false},
{title: 'title 2', message: 'message 2', dismissible: true},
{title: 'title 3', message: 'message 3', dismissible: false},
] }
updateLast = (contents) => {
this.setState({
queue: update(this.state.queue, {
[this.state.queue.length-1]: {
title: {$set: contents.title},
message: {$set: contents.message},
dismissible: {$set: contents.dismissible},
},
}),
})
}
render() {
return (
<div className="notifications">
{this.state.queue.map((notification, key) => (
<Notification key={key} {...notification} />
))}
</div>
)
}
As you can see, in the update method I am specifying the object keys title, message etc. explicitly.
Is there some way I can update all the keys of the object using map or spread ... operator?
reactjs state spread-syntax
asked Dec 31 '18 at 2:57
vikmalhotravikmalhotra
6,0091982132
I have an array of objects in my state. I want to update the last object in array. But I don't want to explicitly mention the keys when updating the object.
This is how my code looks right now.
import React from 'react'
import update from 'immutability-helper'
class Container extends React.Component {
state = { queue: [
{title: 'title 1', message: 'message 1', dismissible: false},
{title: 'title 2', message: 'message 2', dismissible: true},
{title: 'title 3', message: 'message 3', dismissible: false},
] }
updateLast = (contents) => {
this.setState({
queue: update(this.state.queue, {
[this.state.queue.length-1]: {
title: {$set: contents.title},
message: {$set: contents.message},
dismissible: {$set: contents.dismissible},
},
}),
})
}
render() {
return (
<div className="notifications">
{this.state.queue.map((notification, key) => (
<Notification key={key} {...notification} />
))}
</div>
)
}
As you can see, in the update method I am specifying the object keys title, message etc. explicitly.
Is there some way I can update all the keys of the object using map or spread ... operator?
reactjs state spread-syntax
reactjs state spread-syntax
asked Dec 31 '18 at 2:57
vikmalhotravikmalhotra
6,0091982132
asked Dec 31 '18 at 2:57
vikmalhotravikmalhotra
6,0091982132
edited Dec 31 '18 at 3:30
vikmalhotra
asked Dec 31 '18 at 2:57
vikmalhotravikmalhotra
6,0091982132
asked Dec 31 '18 at 2:57
vikmalhotravikmalhotra
6,0091982132
asked Dec 31 '18 at 2:57
vikmalhotravikmalhotra
6,0091982132
6,0091982132
what do you mean bykeys? Is that a property inside thequeueobject?
– Thinker
Dec 31 '18 at 3:13
@Thinkerqueueis an array of objects. They keys are the object properties. I am updating my question with the contents ofqueue..
– vikmalhotra
Dec 31 '18 at 3:29
@vikramalhotra may I know the reason of changing the key of the object? The key is a unique ID (from my understanding), so how you want to edit the key and why do you want to edit it?
– Thinker
Dec 31 '18 at 3:33
@Thinker oh no. I don't want to change the keys. I want to update the values. But I don't want to use the keys explicitly to update the values.
– vikmalhotra
Dec 31 '18 at 3:37
add a comment |
what do you mean bykeys? Is that a property inside thequeueobject?
– Thinker
Dec 31 '18 at 3:13
@Thinkerqueueis an array of objects. They keys are the object properties. I am updating my question with the contents ofqueue..
– vikmalhotra
Dec 31 '18 at 3:29
@vikramalhotra may I know the reason of changing the key of the object? The key is a unique ID (from my understanding), so how you want to edit the key and why do you want to edit it?
– Thinker
Dec 31 '18 at 3:33
@Thinker oh no. I don't want to change the keys. I want to update the values. But I don't want to use the keys explicitly to update the values.
– vikmalhotra
Dec 31 '18 at 3:37
what do you mean by
keys? Is that a property inside the queue object?– Thinker
Dec 31 '18 at 3:13
what do you mean by
keys? Is that a property inside the queue object?– Thinker
Dec 31 '18 at 3:13
@Thinker
queue is an array of objects. They keys are the object properties. I am updating my question with the contents of queue..– vikmalhotra
Dec 31 '18 at 3:29
@Thinker
queue is an array of objects. They keys are the object properties. I am updating my question with the contents of queue..– vikmalhotra
Dec 31 '18 at 3:29
@vikramalhotra may I know the reason of changing the key of the object? The key is a unique ID (from my understanding), so how you want to edit the key and why do you want to edit it?
– Thinker
Dec 31 '18 at 3:33
@vikramalhotra may I know the reason of changing the key of the object? The key is a unique ID (from my understanding), so how you want to edit the key and why do you want to edit it?
– Thinker
Dec 31 '18 at 3:33
@Thinker oh no. I don't want to change the keys. I want to update the values. But I don't want to use the keys explicitly to update the values.
– vikmalhotra
Dec 31 '18 at 3:37
@Thinker oh no. I don't want to change the keys. I want to update the values. But I don't want to use the keys explicitly to update the values.
– vikmalhotra
Dec 31 '18 at 3:37
add a comment |
2 Answers
2
active
oldest
votes
If the contents object has the same shape as the items in your array, you could probably add in the object directly. You can remove the last index with .slice(0, -1), then use .concat to add the new item to the end. Also to make sure to use the callback form of setState, and always do so when the new state depends on the previous in some way.
this.setState((state) => ({
queue: state.queue.slice(0, -1).concat(contents),
}))
Array spread works here as well.
this.setState((state) => ({
queue: [...state.queue.slice(0, -1), contents],
}))
answered Dec 31 '18 at 3:40
kingdarokingdaro
4,83311226
Cool. this works like a charm. Thanks a lot.
– vikmalhotra
Dec 31 '18 at 3:42
add a comment |
Using the spread operator, you could slice off the last item in the array and then create a new object to take its place like so:
updateLast = (contents) => {
this.setState({
queue: [...this.state.queue.slice(0, -1), {
title: {$set: contents.title},
message: {$set: contents.message},
dismissible: {$set: contents.dismissible},
}],
})
}
answered Dec 31 '18 at 3:36
kevin.groatkevin.groat
830817
Alright. Your answer was pretty close to the accepted answer. :)
– vikmalhotra
Dec 31 '18 at 3:43
ah, didn't see all of the$setstuff in there; could have just beencontentslike the other answer said.
– kevin.groat
Dec 31 '18 at 3:45
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%2f53983153%2freact-state-update-an-index-of-array-objects-without-explicitly-specifying-key%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
If the contents object has the same shape as the items in your array, you could probably add in the object directly. You can remove the last index with .slice(0, -1), then use .concat to add the new item to the end. Also to make sure to use the callback form of setState, and always do so when the new state depends on the previous in some way.
this.setState((state) => ({
queue: state.queue.slice(0, -1).concat(contents),
}))
Array spread works here as well.
this.setState((state) => ({
queue: [...state.queue.slice(0, -1), contents],
}))
answered Dec 31 '18 at 3:40
kingdarokingdaro
4,83311226
Cool. this works like a charm. Thanks a lot.
– vikmalhotra
Dec 31 '18 at 3:42
add a comment |
If the contents object has the same shape as the items in your array, you could probably add in the object directly. You can remove the last index with .slice(0, -1), then use .concat to add the new item to the end. Also to make sure to use the callback form of setState, and always do so when the new state depends on the previous in some way.
this.setState((state) => ({
queue: state.queue.slice(0, -1).concat(contents),
}))
Array spread works here as well.
this.setState((state) => ({
queue: [...state.queue.slice(0, -1), contents],
}))
answered Dec 31 '18 at 3:40
kingdarokingdaro
4,83311226
Cool. this works like a charm. Thanks a lot.
– vikmalhotra
Dec 31 '18 at 3:42
add a comment |
If the contents object has the same shape as the items in your array, you could probably add in the object directly. You can remove the last index with .slice(0, -1), then use .concat to add the new item to the end. Also to make sure to use the callback form of setState, and always do so when the new state depends on the previous in some way.
this.setState((state) => ({
queue: state.queue.slice(0, -1).concat(contents),
}))
Array spread works here as well.
this.setState((state) => ({
queue: [...state.queue.slice(0, -1), contents],
}))
answered Dec 31 '18 at 3:40
kingdarokingdaro
4,83311226
If the contents object has the same shape as the items in your array, you could probably add in the object directly. You can remove the last index with .slice(0, -1), then use .concat to add the new item to the end. Also to make sure to use the callback form of setState, and always do so when the new state depends on the previous in some way.
this.setState((state) => ({
queue: state.queue.slice(0, -1).concat(contents),
}))
Array spread works here as well.
this.setState((state) => ({
queue: [...state.queue.slice(0, -1), contents],
}))
answered Dec 31 '18 at 3:40
kingdarokingdaro
4,83311226
answered Dec 31 '18 at 3:40
kingdarokingdaro
4,83311226
answered Dec 31 '18 at 3:40
kingdarokingdaro
4,83311226
answered Dec 31 '18 at 3:40
kingdarokingdaro
4,83311226
4,83311226
Cool. this works like a charm. Thanks a lot.
– vikmalhotra
Dec 31 '18 at 3:42
add a comment |
Cool. this works like a charm. Thanks a lot.
– vikmalhotra
Dec 31 '18 at 3:42
Cool. this works like a charm. Thanks a lot.
– vikmalhotra
Dec 31 '18 at 3:42
Cool. this works like a charm. Thanks a lot.
– vikmalhotra
Dec 31 '18 at 3:42
add a comment |
Using the spread operator, you could slice off the last item in the array and then create a new object to take its place like so:
updateLast = (contents) => {
this.setState({
queue: [...this.state.queue.slice(0, -1), {
title: {$set: contents.title},
message: {$set: contents.message},
dismissible: {$set: contents.dismissible},
}],
})
}
answered Dec 31 '18 at 3:36
kevin.groatkevin.groat
830817
Alright. Your answer was pretty close to the accepted answer. :)
– vikmalhotra
Dec 31 '18 at 3:43
ah, didn't see all of the$setstuff in there; could have just beencontentslike the other answer said.
– kevin.groat
Dec 31 '18 at 3:45
add a comment |
Using the spread operator, you could slice off the last item in the array and then create a new object to take its place like so:
updateLast = (contents) => {
this.setState({
queue: [...this.state.queue.slice(0, -1), {
title: {$set: contents.title},
message: {$set: contents.message},
dismissible: {$set: contents.dismissible},
}],
})
}
answered Dec 31 '18 at 3:36
kevin.groatkevin.groat
830817
Alright. Your answer was pretty close to the accepted answer. :)
– vikmalhotra
Dec 31 '18 at 3:43
ah, didn't see all of the$setstuff in there; could have just beencontentslike the other answer said.
– kevin.groat
Dec 31 '18 at 3:45
add a comment |
Using the spread operator, you could slice off the last item in the array and then create a new object to take its place like so:
updateLast = (contents) => {
this.setState({
queue: [...this.state.queue.slice(0, -1), {
title: {$set: contents.title},
message: {$set: contents.message},
dismissible: {$set: contents.dismissible},
}],
})
}
answered Dec 31 '18 at 3:36
kevin.groatkevin.groat
830817
Using the spread operator, you could slice off the last item in the array and then create a new object to take its place like so:
updateLast = (contents) => {
this.setState({
queue: [...this.state.queue.slice(0, -1), {
title: {$set: contents.title},
message: {$set: contents.message},
dismissible: {$set: contents.dismissible},
}],
})
}
answered Dec 31 '18 at 3:36
kevin.groatkevin.groat
830817
answered Dec 31 '18 at 3:36
kevin.groatkevin.groat
830817
answered Dec 31 '18 at 3:36
kevin.groatkevin.groat
830817
answered Dec 31 '18 at 3:36
kevin.groatkevin.groat
830817
830817
Alright. Your answer was pretty close to the accepted answer. :)
– vikmalhotra
Dec 31 '18 at 3:43
ah, didn't see all of the$setstuff in there; could have just beencontentslike the other answer said.
– kevin.groat
Dec 31 '18 at 3:45
add a comment |
Alright. Your answer was pretty close to the accepted answer. :)
– vikmalhotra
Dec 31 '18 at 3:43
ah, didn't see all of the$setstuff in there; could have just beencontentslike the other answer said.
– kevin.groat
Dec 31 '18 at 3:45
Alright. Your answer was pretty close to the accepted answer. :)
– vikmalhotra
Dec 31 '18 at 3:43
Alright. Your answer was pretty close to the accepted answer. :)
– vikmalhotra
Dec 31 '18 at 3:43
ah, didn't see all of the
$set stuff in there; could have just been contents like the other answer said.– kevin.groat
Dec 31 '18 at 3:45
ah, didn't see all of the
$set stuff in there; could have just been contents like the other answer said.– kevin.groat
Dec 31 '18 at 3:45
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%2f53983153%2freact-state-update-an-index-of-array-objects-without-explicitly-specifying-key%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
what do you mean by
keys? Is that a property inside thequeueobject?– Thinker
Dec 31 '18 at 3:13
@Thinker
queueis an array of objects. They keys are the object properties. I am updating my question with the contents ofqueue..– vikmalhotra
Dec 31 '18 at 3:29
@vikramalhotra may I know the reason of changing the key of the object? The key is a unique ID (from my understanding), so how you want to edit the key and why do you want to edit it?
– Thinker
Dec 31 '18 at 3:33
@Thinker oh no. I don't want to change the keys. I want to update the values. But I don't want to use the keys explicitly to update the values.
– vikmalhotra
Dec 31 '18 at 3:37