1

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?

Community
  • 1
  • 1
Kaushal28
  • 5,377
  • 5
  • 41
  • 72
  • personally, I would go for redux or mobx or other state management lib to store global state. – Canastro Jan 01 '19 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 01 '19 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: https://egghead.io/courses/getting-started-with-redux – Canastro Jan 01 '19 at 11:57

1 Answers1

1

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.

Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151