Mixing
Stuck While lifting state up in React Native
I'm creating a sample react application for learning purpose, in that I've following hierarchy of separate components:
<RadioButton>
//Radio buttons are rendered here and selection of radio buttons are maintained in state of this component
</RadioButton>
<SelectCard>
<RadioButton dataToPopulate = ['choice A', 'choice B'] />
</SelectCard>
<ParentSelectCard>
<SelectCard /> //Rendering SelectCard with passing some data as prop from here
</ParentSelectCard>
<Button /> //Custom button component
<HomeScreen>
<ParentSelectCard />
<Button />
</HomeScreen>
Now when I press the button, I want to navigate to other screen by passing the selected options in radio buttons.
I've read this article about lifting state up. But the problem is, here there is no common parent ancestor to which I can lift the state to.
If I list the state up to <HomeScreen> component, How can I manage the selections made in <RadioButton> component?
Here is the complete code of <RadioButton> component:
class RadioButton extends React.Component {
constructor(props) {
super(props);
this.state = {
radioSelected: 0
}
}
handleRadioClick(id) {
this.setState({
radioSelected: id
});
}
render(){
return this.props.dataToPopulate.map((element) => {
return (
<View key = {element.id} style={styles.radioButton}>
<TouchableOpacity style={styles.radioButtonTint} onPress = {this.handleRadioClick.bind(this, element.id)}>
{ element.id === this.state.radioSelected ? (<View style={styles.radioButtonSelected}/>) : (null) }
</TouchableOpacity>
<Text style={styles.radioButtonText}> {element.value} </Text>
</View>
);
});
}
}
Here you can see that the final choice made will be stored in the state of this component (in radioSelected).
What I'm missing here? Is my design of <RadioButton> wrong?
javascript reactjs react-native ecmascript-6 react-state-management
asked Jan 1 at 11:40
Kaushal28Kaushal28
3,38031643
add a comment |
I'm creating a sample react application for learning purpose, in that I've following hierarchy of separate components:
<RadioButton>
//Radio buttons are rendered here and selection of radio buttons are maintained in state of this component
</RadioButton>
<SelectCard>
<RadioButton dataToPopulate = ['choice A', 'choice B'] />
</SelectCard>
<ParentSelectCard>
<SelectCard /> //Rendering SelectCard with passing some data as prop from here
</ParentSelectCard>
<Button /> //Custom button component
<HomeScreen>
<ParentSelectCard />
<Button />
</HomeScreen>
Now when I press the button, I want to navigate to other screen by passing the selected options in radio buttons.
I've read this article about lifting state up. But the problem is, here there is no common parent ancestor to which I can lift the state to.
If I list the state up to <HomeScreen> component, How can I manage the selections made in <RadioButton> component?
Here is the complete code of <RadioButton> component:
class RadioButton extends React.Component {
constructor(props) {
super(props);
this.state = {
radioSelected: 0
}
}
handleRadioClick(id) {
this.setState({
radioSelected: id
});
}
render(){
return this.props.dataToPopulate.map((element) => {
return (
<View key = {element.id} style={styles.radioButton}>
<TouchableOpacity style={styles.radioButtonTint} onPress = {this.handleRadioClick.bind(this, element.id)}>
{ element.id === this.state.radioSelected ? (<View style={styles.radioButtonSelected}/>) : (null) }
</TouchableOpacity>
<Text style={styles.radioButtonText}> {element.value} </Text>
</View>
);
});
}
}
Here you can see that the final choice made will be stored in the state of this component (in radioSelected).
What I'm missing here? Is my design of <RadioButton> wrong?
javascript reactjs react-native ecmascript-6 react-state-management
asked Jan 1 at 11:40
Kaushal28Kaushal28
3,38031643
personally, I would go for redux or mobx or other state management lib to store global state.
– Canastro
Jan 1 at 11:44
So redux is for storing states to some global variable and then accessing it from anywhere, is that correct? I'm new to React/Redux.
– Kaushal28
Jan 1 at 11:45
Yeah, thats correct. Usually you would have container components to access the redux stores and select the specific parts of the state and then pass it down to ui components. this course is free and might help you out to get started: egghead.io/courses/getting-started-with-redux
– Canastro
Jan 1 at 11:57
add a comment |
I'm creating a sample react application for learning purpose, in that I've following hierarchy of separate components:
<RadioButton>
//Radio buttons are rendered here and selection of radio buttons are maintained in state of this component
</RadioButton>
<SelectCard>
<RadioButton dataToPopulate = ['choice A', 'choice B'] />
</SelectCard>
<ParentSelectCard>
<SelectCard /> //Rendering SelectCard with passing some data as prop from here
</ParentSelectCard>
<Button /> //Custom button component
<HomeScreen>
<ParentSelectCard />
<Button />
</HomeScreen>
Now when I press the button, I want to navigate to other screen by passing the selected options in radio buttons.
I've read this article about lifting state up. But the problem is, here there is no common parent ancestor to which I can lift the state to.
If I list the state up to <HomeScreen> component, How can I manage the selections made in <RadioButton> component?
Here is the complete code of <RadioButton> component:
class RadioButton extends React.Component {
constructor(props) {
super(props);
this.state = {
radioSelected: 0
}
}
handleRadioClick(id) {
this.setState({
radioSelected: id
});
}
render(){
return this.props.dataToPopulate.map((element) => {
return (
<View key = {element.id} style={styles.radioButton}>
<TouchableOpacity style={styles.radioButtonTint} onPress = {this.handleRadioClick.bind(this, element.id)}>
{ element.id === this.state.radioSelected ? (<View style={styles.radioButtonSelected}/>) : (null) }
</TouchableOpacity>
<Text style={styles.radioButtonText}> {element.value} </Text>
</View>
);
});
}
}
Here you can see that the final choice made will be stored in the state of this component (in radioSelected).
What I'm missing here? Is my design of <RadioButton> wrong?
javascript reactjs react-native ecmascript-6 react-state-management
asked Jan 1 at 11:40
Kaushal28Kaushal28
3,38031643
I'm creating a sample react application for learning purpose, in that I've following hierarchy of separate components:
<RadioButton>
//Radio buttons are rendered here and selection of radio buttons are maintained in state of this component
</RadioButton>
<SelectCard>
<RadioButton dataToPopulate = ['choice A', 'choice B'] />
</SelectCard>
<ParentSelectCard>
<SelectCard /> //Rendering SelectCard with passing some data as prop from here
</ParentSelectCard>
<Button /> //Custom button component
<HomeScreen>
<ParentSelectCard />
<Button />
</HomeScreen>
Now when I press the button, I want to navigate to other screen by passing the selected options in radio buttons.
I've read this article about lifting state up. But the problem is, here there is no common parent ancestor to which I can lift the state to.
If I list the state up to <HomeScreen> component, How can I manage the selections made in <RadioButton> component?
Here is the complete code of <RadioButton> component:
class RadioButton extends React.Component {
constructor(props) {
super(props);
this.state = {
radioSelected: 0
}
}
handleRadioClick(id) {
this.setState({
radioSelected: id
});
}
render(){
return this.props.dataToPopulate.map((element) => {
return (
<View key = {element.id} style={styles.radioButton}>
<TouchableOpacity style={styles.radioButtonTint} onPress = {this.handleRadioClick.bind(this, element.id)}>
{ element.id === this.state.radioSelected ? (<View style={styles.radioButtonSelected}/>) : (null) }
</TouchableOpacity>
<Text style={styles.radioButtonText}> {element.value} </Text>
</View>
);
});
}
}
Here you can see that the final choice made will be stored in the state of this component (in radioSelected).
What I'm missing here? Is my design of <RadioButton> wrong?
javascript reactjs react-native ecmascript-6 react-state-management
javascript reactjs react-native ecmascript-6 react-state-management
asked Jan 1 at 11:40
Kaushal28Kaushal28
3,38031643
asked Jan 1 at 11:40
Kaushal28Kaushal28
3,38031643
edited Jan 1 at 11:54
Kaushal28
asked Jan 1 at 11:40
Kaushal28Kaushal28
3,38031643
asked Jan 1 at 11:40
Kaushal28Kaushal28
3,38031643
asked Jan 1 at 11:40
Kaushal28Kaushal28
3,38031643
3,38031643
personally, I would go for redux or mobx or other state management lib to store global state.
– Canastro
Jan 1 at 11:44
So redux is for storing states to some global variable and then accessing it from anywhere, is that correct? I'm new to React/Redux.
– Kaushal28
Jan 1 at 11:45
Yeah, thats correct. Usually you would have container components to access the redux stores and select the specific parts of the state and then pass it down to ui components. this course is free and might help you out to get started: egghead.io/courses/getting-started-with-redux
– Canastro
Jan 1 at 11:57
add a comment |
personally, I would go for redux or mobx or other state management lib to store global state.
– Canastro
Jan 1 at 11:44
So redux is for storing states to some global variable and then accessing it from anywhere, is that correct? I'm new to React/Redux.
– Kaushal28
Jan 1 at 11:45
Yeah, thats correct. Usually you would have container components to access the redux stores and select the specific parts of the state and then pass it down to ui components. this course is free and might help you out to get started: egghead.io/courses/getting-started-with-redux
– Canastro
Jan 1 at 11:57
personally, I would go for redux or mobx or other state management lib to store global state.
– Canastro
Jan 1 at 11:44
personally, I would go for redux or mobx or other state management lib to store global state.
– Canastro
Jan 1 at 11:44
So redux is for storing states to some global variable and then accessing it from anywhere, is that correct? I'm new to React/Redux.
– Kaushal28
Jan 1 at 11:45
So redux is for storing states to some global variable and then accessing it from anywhere, is that correct? I'm new to React/Redux.
– Kaushal28
Jan 1 at 11:45
Yeah, thats correct. Usually you would have container components to access the redux stores and select the specific parts of the state and then pass it down to ui components. this course is free and might help you out to get started: egghead.io/courses/getting-started-with-redux
– Canastro
Jan 1 at 11:57
Yeah, thats correct. Usually you would have container components to access the redux stores and select the specific parts of the state and then pass it down to ui components. this course is free and might help you out to get started: egghead.io/courses/getting-started-with-redux
– Canastro
Jan 1 at 11:57
add a comment |
1 Answer
1
active
oldest
votes
What I'm missing here? Is my design of is wrong?
Well if you "lift state up" the radio button itself should not have any state at all. Instead pass down a handler to the RadioButton:
<RadioButton onChange={value => this.doSomethingWith(value)} />
Then you can call that inside of the radio button whenevver something was changed, and handle the results in <App/>.
If you have to pass down that handler through multiple levels it might be better to use a context.
answered Jan 1 at 11:50
Jonas WilmsJonas Wilms
60.4k53255
Can you give an example or any relevant link where passing handler is explained? Thanks for the answer.
– Kaushal28
Jan 1 at 11:56
@kaushal28 it is in the official react documentation you linked :)
– Jonas Wilms
Jan 1 at 11:57
Not able to make it work by passing handler function. Any such examples?
– Kaushal28
Jan 1 at 13:46
Got it! Here is the example: stackoverflow.com/questions/35537229/…. Thanks for suggesting the correct way.
– Kaushal28
Jan 1 at 14:59
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%2f53995124%2fstuck-while-lifting-state-up-in-react-native%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
What I'm missing here? Is my design of is wrong?
Well if you "lift state up" the radio button itself should not have any state at all. Instead pass down a handler to the RadioButton:
<RadioButton onChange={value => this.doSomethingWith(value)} />
Then you can call that inside of the radio button whenevver something was changed, and handle the results in <App/>.
If you have to pass down that handler through multiple levels it might be better to use a context.
answered Jan 1 at 11:50
Jonas WilmsJonas Wilms
60.4k53255
Can you give an example or any relevant link where passing handler is explained? Thanks for the answer.
– Kaushal28
Jan 1 at 11:56
@kaushal28 it is in the official react documentation you linked :)
– Jonas Wilms
Jan 1 at 11:57
Not able to make it work by passing handler function. Any such examples?
– Kaushal28
Jan 1 at 13:46
Got it! Here is the example: stackoverflow.com/questions/35537229/…. Thanks for suggesting the correct way.
– Kaushal28
Jan 1 at 14:59
add a comment |
What I'm missing here? Is my design of is wrong?
Well if you "lift state up" the radio button itself should not have any state at all. Instead pass down a handler to the RadioButton:
<RadioButton onChange={value => this.doSomethingWith(value)} />
Then you can call that inside of the radio button whenevver something was changed, and handle the results in <App/>.
If you have to pass down that handler through multiple levels it might be better to use a context.
answered Jan 1 at 11:50
Jonas WilmsJonas Wilms
60.4k53255
Can you give an example or any relevant link where passing handler is explained? Thanks for the answer.
– Kaushal28
Jan 1 at 11:56
@kaushal28 it is in the official react documentation you linked :)
– Jonas Wilms
Jan 1 at 11:57
Not able to make it work by passing handler function. Any such examples?
– Kaushal28
Jan 1 at 13:46
Got it! Here is the example: stackoverflow.com/questions/35537229/…. Thanks for suggesting the correct way.
– Kaushal28
Jan 1 at 14:59
add a comment |
What I'm missing here? Is my design of is wrong?
Well if you "lift state up" the radio button itself should not have any state at all. Instead pass down a handler to the RadioButton:
<RadioButton onChange={value => this.doSomethingWith(value)} />
Then you can call that inside of the radio button whenevver something was changed, and handle the results in <App/>.
If you have to pass down that handler through multiple levels it might be better to use a context.
answered Jan 1 at 11:50
Jonas WilmsJonas Wilms
60.4k53255
What I'm missing here? Is my design of is wrong?
Well if you "lift state up" the radio button itself should not have any state at all. Instead pass down a handler to the RadioButton:
<RadioButton onChange={value => this.doSomethingWith(value)} />
Then you can call that inside of the radio button whenevver something was changed, and handle the results in <App/>.
If you have to pass down that handler through multiple levels it might be better to use a context.
answered Jan 1 at 11:50
Jonas WilmsJonas Wilms
60.4k53255
answered Jan 1 at 11:50
Jonas WilmsJonas Wilms
60.4k53255
answered Jan 1 at 11:50
Jonas WilmsJonas Wilms
60.4k53255
answered Jan 1 at 11:50
Jonas WilmsJonas Wilms
60.4k53255
60.4k53255
Can you give an example or any relevant link where passing handler is explained? Thanks for the answer.
– Kaushal28
Jan 1 at 11:56
@kaushal28 it is in the official react documentation you linked :)
– Jonas Wilms
Jan 1 at 11:57
Not able to make it work by passing handler function. Any such examples?
– Kaushal28
Jan 1 at 13:46
Got it! Here is the example: stackoverflow.com/questions/35537229/…. Thanks for suggesting the correct way.
– Kaushal28
Jan 1 at 14:59
add a comment |
Can you give an example or any relevant link where passing handler is explained? Thanks for the answer.
– Kaushal28
Jan 1 at 11:56
@kaushal28 it is in the official react documentation you linked :)
– Jonas Wilms
Jan 1 at 11:57
Not able to make it work by passing handler function. Any such examples?
– Kaushal28
Jan 1 at 13:46
Got it! Here is the example: stackoverflow.com/questions/35537229/…. Thanks for suggesting the correct way.
– Kaushal28
Jan 1 at 14:59
Can you give an example or any relevant link where passing handler is explained? Thanks for the answer.
– Kaushal28
Jan 1 at 11:56
Can you give an example or any relevant link where passing handler is explained? Thanks for the answer.
– Kaushal28
Jan 1 at 11:56
@kaushal28 it is in the official react documentation you linked :)
– Jonas Wilms
Jan 1 at 11:57
@kaushal28 it is in the official react documentation you linked :)
– Jonas Wilms
Jan 1 at 11:57
Not able to make it work by passing handler function. Any such examples?
– Kaushal28
Jan 1 at 13:46
Not able to make it work by passing handler function. Any such examples?
– Kaushal28
Jan 1 at 13:46
Got it! Here is the example: stackoverflow.com/questions/35537229/…. Thanks for suggesting the correct way.
– Kaushal28
Jan 1 at 14:59
Got it! Here is the example: stackoverflow.com/questions/35537229/…. Thanks for suggesting the correct way.
– Kaushal28
Jan 1 at 14:59
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%2f53995124%2fstuck-while-lifting-state-up-in-react-native%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
personally, I would go for redux or mobx or other state management lib to store global state.
– Canastro
Jan 1 at 11:44
So redux is for storing states to some global variable and then accessing it from anywhere, is that correct? I'm new to React/Redux.
– Kaushal28
Jan 1 at 11:45
Yeah, thats correct. Usually you would have container components to access the redux stores and select the specific parts of the state and then pass it down to ui components. this course is free and might help you out to get started: egghead.io/courses/getting-started-with-redux
– Canastro
Jan 1 at 11:57