Multiple states sharing the same view or component in React
Is it possible for say two states that update a single view/component?
How do we do this in react?
this.state({
dog: 'Canny'
person: 'Brian'
})
<Text>{blank} likes beans.<Text>
For example, when this.state.dog updates, the field will read 'Canny likes beans', when this.state.person updates, the field will read 'Brian likes beans'. Is there a way to do this?
Edit: This is useful for the case where the view only has one window to display updates of two states, and I understand you can use a render function to achieve this, but is there a simple 'first principles' way in react to do this?
javascript reactjs react-native
add a comment |
Is it possible for say two states that update a single view/component?
How do we do this in react?
this.state({
dog: 'Canny'
person: 'Brian'
})
<Text>{blank} likes beans.<Text>
For example, when this.state.dog updates, the field will read 'Canny likes beans', when this.state.person updates, the field will read 'Brian likes beans'. Is there a way to do this?
Edit: This is useful for the case where the view only has one window to display updates of two states, and I understand you can use a render function to achieve this, but is there a simple 'first principles' way in react to do this?
javascript reactjs react-native
It's unclear what you mean. Please, post valid code instead of pseudo-code, as it doesn't show the intention.
– estus
Nov 21 '18 at 9:31
@estus It's hard for me to post valid code because my question is exactly asking for the right way to do it, I will try to make the question clearer though, thanks
– iWillGetBetter
Nov 22 '18 at 1:32
This depends on expected logic behind this. In this example (it'ssetState
, notstate
) both values will be updated. Which one should be shown? Should there be an error in this case?
– estus
Nov 22 '18 at 6:20
add a comment |
Is it possible for say two states that update a single view/component?
How do we do this in react?
this.state({
dog: 'Canny'
person: 'Brian'
})
<Text>{blank} likes beans.<Text>
For example, when this.state.dog updates, the field will read 'Canny likes beans', when this.state.person updates, the field will read 'Brian likes beans'. Is there a way to do this?
Edit: This is useful for the case where the view only has one window to display updates of two states, and I understand you can use a render function to achieve this, but is there a simple 'first principles' way in react to do this?
javascript reactjs react-native
Is it possible for say two states that update a single view/component?
How do we do this in react?
this.state({
dog: 'Canny'
person: 'Brian'
})
<Text>{blank} likes beans.<Text>
For example, when this.state.dog updates, the field will read 'Canny likes beans', when this.state.person updates, the field will read 'Brian likes beans'. Is there a way to do this?
Edit: This is useful for the case where the view only has one window to display updates of two states, and I understand you can use a render function to achieve this, but is there a simple 'first principles' way in react to do this?
javascript reactjs react-native
javascript reactjs react-native
edited Nov 22 '18 at 1:26
iWillGetBetter
asked Nov 21 '18 at 9:22
iWillGetBetteriWillGetBetter
5541927
5541927
It's unclear what you mean. Please, post valid code instead of pseudo-code, as it doesn't show the intention.
– estus
Nov 21 '18 at 9:31
@estus It's hard for me to post valid code because my question is exactly asking for the right way to do it, I will try to make the question clearer though, thanks
– iWillGetBetter
Nov 22 '18 at 1:32
This depends on expected logic behind this. In this example (it'ssetState
, notstate
) both values will be updated. Which one should be shown? Should there be an error in this case?
– estus
Nov 22 '18 at 6:20
add a comment |
It's unclear what you mean. Please, post valid code instead of pseudo-code, as it doesn't show the intention.
– estus
Nov 21 '18 at 9:31
@estus It's hard for me to post valid code because my question is exactly asking for the right way to do it, I will try to make the question clearer though, thanks
– iWillGetBetter
Nov 22 '18 at 1:32
This depends on expected logic behind this. In this example (it'ssetState
, notstate
) both values will be updated. Which one should be shown? Should there be an error in this case?
– estus
Nov 22 '18 at 6:20
It's unclear what you mean. Please, post valid code instead of pseudo-code, as it doesn't show the intention.
– estus
Nov 21 '18 at 9:31
It's unclear what you mean. Please, post valid code instead of pseudo-code, as it doesn't show the intention.
– estus
Nov 21 '18 at 9:31
@estus It's hard for me to post valid code because my question is exactly asking for the right way to do it, I will try to make the question clearer though, thanks
– iWillGetBetter
Nov 22 '18 at 1:32
@estus It's hard for me to post valid code because my question is exactly asking for the right way to do it, I will try to make the question clearer though, thanks
– iWillGetBetter
Nov 22 '18 at 1:32
This depends on expected logic behind this. In this example (it's
setState
, not state
) both values will be updated. Which one should be shown? Should there be an error in this case?– estus
Nov 22 '18 at 6:20
This depends on expected logic behind this. In this example (it's
setState
, not state
) both values will be updated. Which one should be shown? Should there be an error in this case?– estus
Nov 22 '18 at 6:20
add a comment |
2 Answers
2
active
oldest
votes
This should be done by introducing another state property, personOrDog
:
<Text>{this.state.personOrDog} likes beans.<Text>
There's no straightforward way to check previous and current person
and dog
state to calculate personOrDog
. Previous and current states are available in shouldComponentUpdate
but the use of setState
to set personOrDog
there is discouraged because it abuses this lifecycle hook.
This means that this issue should preferably be addressed in a place where a state is updated:
this.setState({
dog: 'Canny',
personOrDog: 'Canny'
});
To make code DRYer, a helper can be used to set these properties, e.g.:
const personOrDog = (key, value) => ({
[key]: value,
personOrDog: value
});
...
this.setState(personOrDog('dog', 'Canny'));
I see, so the only way is to actually use one state to manage one datum in the view.
– iWillGetBetter
Nov 23 '18 at 1:24
There is no clean way. You cannot know which one was updated last in render function without setting this expicitly. An alternative would be to update boolean state field likeisPersonUpdatedLast
instead ofpersonOrDog
, so it will be used like{this.state.isPersonUpdatedLast ? this.state.person : this.state.dog}
, but that's more cumbersome.
– estus
Nov 23 '18 at 6:45
add a comment |
As for me, it is usual situation for React js. Whenever you change state, innerHTML of your Text component re-renders.
this.state({
name:
table:
})
<Text>
Now current state.name is: {this.state.name}, current state.table: {this.state.name}
</Text>
PS: and don't forget to close tags: < / Text>
Thanks for reaching out Max, using your example, it would be how can two different states update the same blank. <Text> Now current state.name/table is: {this.state.name/blank} </Text>
– iWillGetBetter
Nov 22 '18 at 1:23
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%2f53408803%2fmultiple-states-sharing-the-same-view-or-component-in-react%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
This should be done by introducing another state property, personOrDog
:
<Text>{this.state.personOrDog} likes beans.<Text>
There's no straightforward way to check previous and current person
and dog
state to calculate personOrDog
. Previous and current states are available in shouldComponentUpdate
but the use of setState
to set personOrDog
there is discouraged because it abuses this lifecycle hook.
This means that this issue should preferably be addressed in a place where a state is updated:
this.setState({
dog: 'Canny',
personOrDog: 'Canny'
});
To make code DRYer, a helper can be used to set these properties, e.g.:
const personOrDog = (key, value) => ({
[key]: value,
personOrDog: value
});
...
this.setState(personOrDog('dog', 'Canny'));
I see, so the only way is to actually use one state to manage one datum in the view.
– iWillGetBetter
Nov 23 '18 at 1:24
There is no clean way. You cannot know which one was updated last in render function without setting this expicitly. An alternative would be to update boolean state field likeisPersonUpdatedLast
instead ofpersonOrDog
, so it will be used like{this.state.isPersonUpdatedLast ? this.state.person : this.state.dog}
, but that's more cumbersome.
– estus
Nov 23 '18 at 6:45
add a comment |
This should be done by introducing another state property, personOrDog
:
<Text>{this.state.personOrDog} likes beans.<Text>
There's no straightforward way to check previous and current person
and dog
state to calculate personOrDog
. Previous and current states are available in shouldComponentUpdate
but the use of setState
to set personOrDog
there is discouraged because it abuses this lifecycle hook.
This means that this issue should preferably be addressed in a place where a state is updated:
this.setState({
dog: 'Canny',
personOrDog: 'Canny'
});
To make code DRYer, a helper can be used to set these properties, e.g.:
const personOrDog = (key, value) => ({
[key]: value,
personOrDog: value
});
...
this.setState(personOrDog('dog', 'Canny'));
I see, so the only way is to actually use one state to manage one datum in the view.
– iWillGetBetter
Nov 23 '18 at 1:24
There is no clean way. You cannot know which one was updated last in render function without setting this expicitly. An alternative would be to update boolean state field likeisPersonUpdatedLast
instead ofpersonOrDog
, so it will be used like{this.state.isPersonUpdatedLast ? this.state.person : this.state.dog}
, but that's more cumbersome.
– estus
Nov 23 '18 at 6:45
add a comment |
This should be done by introducing another state property, personOrDog
:
<Text>{this.state.personOrDog} likes beans.<Text>
There's no straightforward way to check previous and current person
and dog
state to calculate personOrDog
. Previous and current states are available in shouldComponentUpdate
but the use of setState
to set personOrDog
there is discouraged because it abuses this lifecycle hook.
This means that this issue should preferably be addressed in a place where a state is updated:
this.setState({
dog: 'Canny',
personOrDog: 'Canny'
});
To make code DRYer, a helper can be used to set these properties, e.g.:
const personOrDog = (key, value) => ({
[key]: value,
personOrDog: value
});
...
this.setState(personOrDog('dog', 'Canny'));
This should be done by introducing another state property, personOrDog
:
<Text>{this.state.personOrDog} likes beans.<Text>
There's no straightforward way to check previous and current person
and dog
state to calculate personOrDog
. Previous and current states are available in shouldComponentUpdate
but the use of setState
to set personOrDog
there is discouraged because it abuses this lifecycle hook.
This means that this issue should preferably be addressed in a place where a state is updated:
this.setState({
dog: 'Canny',
personOrDog: 'Canny'
});
To make code DRYer, a helper can be used to set these properties, e.g.:
const personOrDog = (key, value) => ({
[key]: value,
personOrDog: value
});
...
this.setState(personOrDog('dog', 'Canny'));
answered Nov 22 '18 at 7:08
estusestus
75.2k22111228
75.2k22111228
I see, so the only way is to actually use one state to manage one datum in the view.
– iWillGetBetter
Nov 23 '18 at 1:24
There is no clean way. You cannot know which one was updated last in render function without setting this expicitly. An alternative would be to update boolean state field likeisPersonUpdatedLast
instead ofpersonOrDog
, so it will be used like{this.state.isPersonUpdatedLast ? this.state.person : this.state.dog}
, but that's more cumbersome.
– estus
Nov 23 '18 at 6:45
add a comment |
I see, so the only way is to actually use one state to manage one datum in the view.
– iWillGetBetter
Nov 23 '18 at 1:24
There is no clean way. You cannot know which one was updated last in render function without setting this expicitly. An alternative would be to update boolean state field likeisPersonUpdatedLast
instead ofpersonOrDog
, so it will be used like{this.state.isPersonUpdatedLast ? this.state.person : this.state.dog}
, but that's more cumbersome.
– estus
Nov 23 '18 at 6:45
I see, so the only way is to actually use one state to manage one datum in the view.
– iWillGetBetter
Nov 23 '18 at 1:24
I see, so the only way is to actually use one state to manage one datum in the view.
– iWillGetBetter
Nov 23 '18 at 1:24
There is no clean way. You cannot know which one was updated last in render function without setting this expicitly. An alternative would be to update boolean state field like
isPersonUpdatedLast
instead of personOrDog
, so it will be used like {this.state.isPersonUpdatedLast ? this.state.person : this.state.dog}
, but that's more cumbersome.– estus
Nov 23 '18 at 6:45
There is no clean way. You cannot know which one was updated last in render function without setting this expicitly. An alternative would be to update boolean state field like
isPersonUpdatedLast
instead of personOrDog
, so it will be used like {this.state.isPersonUpdatedLast ? this.state.person : this.state.dog}
, but that's more cumbersome.– estus
Nov 23 '18 at 6:45
add a comment |
As for me, it is usual situation for React js. Whenever you change state, innerHTML of your Text component re-renders.
this.state({
name:
table:
})
<Text>
Now current state.name is: {this.state.name}, current state.table: {this.state.name}
</Text>
PS: and don't forget to close tags: < / Text>
Thanks for reaching out Max, using your example, it would be how can two different states update the same blank. <Text> Now current state.name/table is: {this.state.name/blank} </Text>
– iWillGetBetter
Nov 22 '18 at 1:23
add a comment |
As for me, it is usual situation for React js. Whenever you change state, innerHTML of your Text component re-renders.
this.state({
name:
table:
})
<Text>
Now current state.name is: {this.state.name}, current state.table: {this.state.name}
</Text>
PS: and don't forget to close tags: < / Text>
Thanks for reaching out Max, using your example, it would be how can two different states update the same blank. <Text> Now current state.name/table is: {this.state.name/blank} </Text>
– iWillGetBetter
Nov 22 '18 at 1:23
add a comment |
As for me, it is usual situation for React js. Whenever you change state, innerHTML of your Text component re-renders.
this.state({
name:
table:
})
<Text>
Now current state.name is: {this.state.name}, current state.table: {this.state.name}
</Text>
PS: and don't forget to close tags: < / Text>
As for me, it is usual situation for React js. Whenever you change state, innerHTML of your Text component re-renders.
this.state({
name:
table:
})
<Text>
Now current state.name is: {this.state.name}, current state.table: {this.state.name}
</Text>
PS: and don't forget to close tags: < / Text>
this.state({
name:
table:
})
<Text>
Now current state.name is: {this.state.name}, current state.table: {this.state.name}
</Text>
this.state({
name:
table:
})
<Text>
Now current state.name is: {this.state.name}, current state.table: {this.state.name}
</Text>
answered Nov 21 '18 at 9:51
Max KurtzMax Kurtz
1138
1138
Thanks for reaching out Max, using your example, it would be how can two different states update the same blank. <Text> Now current state.name/table is: {this.state.name/blank} </Text>
– iWillGetBetter
Nov 22 '18 at 1:23
add a comment |
Thanks for reaching out Max, using your example, it would be how can two different states update the same blank. <Text> Now current state.name/table is: {this.state.name/blank} </Text>
– iWillGetBetter
Nov 22 '18 at 1:23
Thanks for reaching out Max, using your example, it would be how can two different states update the same blank. <Text> Now current state.name/table is: {this.state.name/blank} </Text>
– iWillGetBetter
Nov 22 '18 at 1:23
Thanks for reaching out Max, using your example, it would be how can two different states update the same blank. <Text> Now current state.name/table is: {this.state.name/blank} </Text>
– iWillGetBetter
Nov 22 '18 at 1:23
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%2f53408803%2fmultiple-states-sharing-the-same-view-or-component-in-react%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
It's unclear what you mean. Please, post valid code instead of pseudo-code, as it doesn't show the intention.
– estus
Nov 21 '18 at 9:31
@estus It's hard for me to post valid code because my question is exactly asking for the right way to do it, I will try to make the question clearer though, thanks
– iWillGetBetter
Nov 22 '18 at 1:32
This depends on expected logic behind this. In this example (it's
setState
, notstate
) both values will be updated. Which one should be shown? Should there be an error in this case?– estus
Nov 22 '18 at 6:20