How to render checked/selected radio button using radioForm in react native

Question

I am new to React-native. I have three values for radio button "Male","Female","other" with respective values "141","142","143". Initially "Male" is selected but if we select "female/Other" still it is showing "Male" as selected, though value is being saved. My code snippet is mentioned below:

    class advanced_targeting extends Component {
       static navigationOptions = {
          title: 'Advanced Targeting',
       };
      constructor() {
          super(props)
         this.state = {
           isLoading: true,
           radio_props: [{ label: 'Male', value: 141 }, { label: 'Female', value: 142 }, { label: 'Other', value: 143 }],
         }
       }
       render() {
          return (
           <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
              <View style={styles.MainContainerViewCamp}>
                <Text style={{ padding: 5, fontSize: 35, backgroundColor: '#2196F3', marginBottom: 7 }}> Advanced Targeting</Text>
                  <ScrollView keyboardShouldPersistTaps='always'>
                     <RadioForm
                        ref="radioForm"
                        style={styles.radioButtonStyle}
                        radio_props={this.state.radio_props}
                        isSelected = {true}
                        initial={this.state.value}
                        formHorizontal={true}
                        buttonColor={'#2196f3'}
                        labelStyle={{ marginRight: 20 }}
                        animation={true}
                        onPress={(value,index) => {
                          this.setState({
                             value: value,
                             valueIndex: index
                          })
                        }} />
               <TouchableOpacity
                   style={styles.SubmitButtonStyle}
                   activeOpacity={.5}
                   onPress={this.saveAdvancedDemography}
               >
                 <Text style={styles.TextStyle}> SAVE DETAILS </Text>
               </TouchableOpacity>
            </ScrollView>
         </View>
      </TouchableWithoutFeedback>
    );
  }
   saveAdvancedDemography = () => {
        const base64 = require('base-64');
       fetch('APIURL', {
           method: 'POST',
           headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              "Authorization": "Basic " + base64.encode("demo:ABCD")
           },
        body: JSON.stringify(
        {

          "dmp_sex":
            {
              "main": this.state.value,
              "data_type": "STRING"
            },
        })
    })
  }

In main, This.state.value is not getting updated. Please, Help

Answer 1

You don't have value and valueIndex in your component's state. Ideally, you should put genderValue in your component's state that would change its value upon choosing an option. Your state should look like:

constructor() {
  super(props)
  this.state = {
    genderValue: 141,
    isLoading: true,
    radio_props: [{ label: 'Male', value: 141 }, { label: 'Female', value: 142 }, { label: 'Other', value: 143 }],
  }
}

And in your RadioForm:

<RadioForm
  ...
  initial={ this.state.genderValue }
  onPress={(value) => {
    this.setState({
      genderValue: value,
    })
  }} />

Then you can use this.state.genderValue in saveAdvancedDemography() .