React | Update part of object and set state
I am trying to update part of an object in React and set the state. I have got it working but it seems like I'm going about it the completely wrong way.
I have an object in the state which is set when the component mounts. I have a checkbox which uses an objects selected property. Essentially on the click of this checkbox I want to set the state and toggle the property. Which I am doing by post.selected = !post.selected.
The difficulty comes when I want to update the state to reflect this change, I am going through the whole of the original object, looking for the post. Updating the post and then updating the state. Is this really how it has to be done? Or can I directly update this value itself and target this within the set state function?
onItemClick(post, is_active = true) {
const posts = this.state.posts;
let postType = is_active ? 'active' : 'not-active';
const parentCategory = posts.find(statePosts => {
return posts[postType].id === post.id;
});
const foundPost = parentCategory[postType].find(selectedPost => selectedPost.id === post.id);
foundPost.selected = !foundPost.selected;
this.setState({posts: posts});
}
It just seems a bit long winded to do it like that when all I want to do is update that one object in the state.
Getting the posts:
componentWillReceiveProps(props) {
this.setState({posts: props.posts});
}
Posts loop:
{
posts.active.map((post) => {
return (
<View key={post.id}>
<CheckBox
checkBoxColor={"green"}
checkedCheckBoxColor={"blue"}
onClick={() => {
this.onItemClick(post)
}}
isChecked={post.selected}
rightText={post.description} />
</View>
)
})
}
javascript reactjs
asked Nov 23 '18 at 16:52
tallent123
310110
add a comment |
I am trying to update part of an object in React and set the state. I have got it working but it seems like I'm going about it the completely wrong way.
I have an object in the state which is set when the component mounts. I have a checkbox which uses an objects selected property. Essentially on the click of this checkbox I want to set the state and toggle the property. Which I am doing by post.selected = !post.selected.
The difficulty comes when I want to update the state to reflect this change, I am going through the whole of the original object, looking for the post. Updating the post and then updating the state. Is this really how it has to be done? Or can I directly update this value itself and target this within the set state function?
onItemClick(post, is_active = true) {
const posts = this.state.posts;
let postType = is_active ? 'active' : 'not-active';
const parentCategory = posts.find(statePosts => {
return posts[postType].id === post.id;
});
const foundPost = parentCategory[postType].find(selectedPost => selectedPost.id === post.id);
foundPost.selected = !foundPost.selected;
this.setState({posts: posts});
}
It just seems a bit long winded to do it like that when all I want to do is update that one object in the state.
Getting the posts:
componentWillReceiveProps(props) {
this.setState({posts: props.posts});
}
Posts loop:
{
posts.active.map((post) => {
return (
<View key={post.id}>
<CheckBox
checkBoxColor={"green"}
checkedCheckBoxColor={"blue"}
onClick={() => {
this.onItemClick(post)
}}
isChecked={post.selected}
rightText={post.description} />
</View>
)
})
}
javascript reactjs
asked Nov 23 '18 at 16:52
tallent123
310110
Could you post more code? Like the place where you call onItemClick, and your constructor?
– iagowp
Nov 23 '18 at 16:55
I have updated the question to have more code
– tallent123
Nov 23 '18 at 17:00
I am not using a constructor @iagowp
– tallent123
Nov 23 '18 at 17:00
add a comment |
I am trying to update part of an object in React and set the state. I have got it working but it seems like I'm going about it the completely wrong way.
I have an object in the state which is set when the component mounts. I have a checkbox which uses an objects selected property. Essentially on the click of this checkbox I want to set the state and toggle the property. Which I am doing by post.selected = !post.selected.
The difficulty comes when I want to update the state to reflect this change, I am going through the whole of the original object, looking for the post. Updating the post and then updating the state. Is this really how it has to be done? Or can I directly update this value itself and target this within the set state function?
onItemClick(post, is_active = true) {
const posts = this.state.posts;
let postType = is_active ? 'active' : 'not-active';
const parentCategory = posts.find(statePosts => {
return posts[postType].id === post.id;
});
const foundPost = parentCategory[postType].find(selectedPost => selectedPost.id === post.id);
foundPost.selected = !foundPost.selected;
this.setState({posts: posts});
}
It just seems a bit long winded to do it like that when all I want to do is update that one object in the state.
Getting the posts:
componentWillReceiveProps(props) {
this.setState({posts: props.posts});
}
Posts loop:
{
posts.active.map((post) => {
return (
<View key={post.id}>
<CheckBox
checkBoxColor={"green"}
checkedCheckBoxColor={"blue"}
onClick={() => {
this.onItemClick(post)
}}
isChecked={post.selected}
rightText={post.description} />
</View>
)
})
}
javascript reactjs
asked Nov 23 '18 at 16:52
tallent123
310110
I am trying to update part of an object in React and set the state. I have got it working but it seems like I'm going about it the completely wrong way.
I have an object in the state which is set when the component mounts. I have a checkbox which uses an objects selected property. Essentially on the click of this checkbox I want to set the state and toggle the property. Which I am doing by post.selected = !post.selected.
The difficulty comes when I want to update the state to reflect this change, I am going through the whole of the original object, looking for the post. Updating the post and then updating the state. Is this really how it has to be done? Or can I directly update this value itself and target this within the set state function?
onItemClick(post, is_active = true) {
const posts = this.state.posts;
let postType = is_active ? 'active' : 'not-active';
const parentCategory = posts.find(statePosts => {
return posts[postType].id === post.id;
});
const foundPost = parentCategory[postType].find(selectedPost => selectedPost.id === post.id);
foundPost.selected = !foundPost.selected;
this.setState({posts: posts});
}
It just seems a bit long winded to do it like that when all I want to do is update that one object in the state.
Getting the posts:
componentWillReceiveProps(props) {
this.setState({posts: props.posts});
}
Posts loop:
{
posts.active.map((post) => {
return (
<View key={post.id}>
<CheckBox
checkBoxColor={"green"}
checkedCheckBoxColor={"blue"}
onClick={() => {
this.onItemClick(post)
}}
isChecked={post.selected}
rightText={post.description} />
</View>
)
})
}
javascript reactjs
javascript reactjs
asked Nov 23 '18 at 16:52
tallent123
310110
asked Nov 23 '18 at 16:52
tallent123
310110
edited Nov 23 '18 at 17:00
asked Nov 23 '18 at 16:52
tallent123
310110
asked Nov 23 '18 at 16:52
tallent123
310110
asked Nov 23 '18 at 16:52
tallent123
310110
310110
Could you post more code? Like the place where you call onItemClick, and your constructor?
– iagowp
Nov 23 '18 at 16:55
I have updated the question to have more code
– tallent123
Nov 23 '18 at 17:00
I am not using a constructor @iagowp
– tallent123
Nov 23 '18 at 17:00
add a comment |
Could you post more code? Like the place where you call onItemClick, and your constructor?
– iagowp
Nov 23 '18 at 16:55
I have updated the question to have more code
– tallent123
Nov 23 '18 at 17:00
I am not using a constructor @iagowp
– tallent123
Nov 23 '18 at 17:00
Could you post more code? Like the place where you call onItemClick, and your constructor?
– iagowp
Nov 23 '18 at 16:55
Could you post more code? Like the place where you call onItemClick, and your constructor?
– iagowp
Nov 23 '18 at 16:55
I have updated the question to have more code
– tallent123
Nov 23 '18 at 17:00
I have updated the question to have more code
– tallent123
Nov 23 '18 at 17:00
I am not using a constructor @iagowp
– tallent123
Nov 23 '18 at 17:00
I am not using a constructor @iagowp
– tallent123
Nov 23 '18 at 17:00
add a comment |
2 Answers
2
active
oldest
votes
Store your post such that id is the key and post is the object. Then while updating do something like posts.active= {...posts.active,...post};
answered Nov 23 '18 at 17:29
archie
111
add a comment |
Use spread operator with new post object to update posts object.
answered Nov 23 '18 at 17:05
archie
111
1
Thanks for the answer, can you please elaborate more?
– tallent123
Nov 23 '18 at 17:06
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%2f53450442%2freact-update-part-of-object-and-set-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
Store your post such that id is the key and post is the object. Then while updating do something like posts.active= {...posts.active,...post};
answered Nov 23 '18 at 17:29
archie
111
add a comment |
Store your post such that id is the key and post is the object. Then while updating do something like posts.active= {...posts.active,...post};
answered Nov 23 '18 at 17:29
archie
111
add a comment |
Store your post such that id is the key and post is the object. Then while updating do something like posts.active= {...posts.active,...post};
answered Nov 23 '18 at 17:29
archie
111
Store your post such that id is the key and post is the object. Then while updating do something like posts.active= {...posts.active,...post};
answered Nov 23 '18 at 17:29
archie
111
answered Nov 23 '18 at 17:29
archie
111
answered Nov 23 '18 at 17:29
archie
111
answered Nov 23 '18 at 17:29
archie
111
111
add a comment |
add a comment |
Use spread operator with new post object to update posts object.
answered Nov 23 '18 at 17:05
archie
111
1
Thanks for the answer, can you please elaborate more?
– tallent123
Nov 23 '18 at 17:06
add a comment |
Use spread operator with new post object to update posts object.
answered Nov 23 '18 at 17:05
archie
111
1
Thanks for the answer, can you please elaborate more?
– tallent123
Nov 23 '18 at 17:06
add a comment |
Use spread operator with new post object to update posts object.
answered Nov 23 '18 at 17:05
archie
111
Use spread operator with new post object to update posts object.
answered Nov 23 '18 at 17:05
archie
111
answered Nov 23 '18 at 17:05
archie
111
answered Nov 23 '18 at 17:05
archie
111
answered Nov 23 '18 at 17:05
archie
111
111
1
Thanks for the answer, can you please elaborate more?
– tallent123
Nov 23 '18 at 17:06
add a comment |
1
Thanks for the answer, can you please elaborate more?
– tallent123
Nov 23 '18 at 17:06
1
1
Thanks for the answer, can you please elaborate more?
– tallent123
Nov 23 '18 at 17:06
Thanks for the answer, can you please elaborate more?
– tallent123
Nov 23 '18 at 17:06
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53450442%2freact-update-part-of-object-and-set-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
Could you post more code? Like the place where you call onItemClick, and your constructor?
– iagowp
Nov 23 '18 at 16:55
I have updated the question to have more code
– tallent123
Nov 23 '18 at 17:00
I am not using a constructor @iagowp
– tallent123
Nov 23 '18 at 17:00