How to change value only from radio button group in react native

Question

everyone. Thanks for your time. This is supossed to be very simple, but I am having trouble dealing with.

I have a "survey" which contains a few questions and 3 radio buttons for each question. The problem is: when I select an option from any radio button, the same option is selected for every question.

I just need to change the value from this group only. I am using RadioButton from react-native-paper. The RadioButton.Group is supposed to deal with this but I am getting to nowhere. How can I do this? I saw an example using react-native-simple-paper but it uses Classes and I using a Function component, so I can't use setState like almost every other library does.

Here's my code sample:

const [value, setValue] = React.useState('');

<ScrollView style={{ flexDirection: 'column' }}>
        {questions &&
          questions .map((p) => {
            return (
              <View style={{
                //flexDirection: 'column',
                elevation: 1,
                borderRadius: 5,
                backgroundColor: '#fff',
                marginTop: 15,
                marginLeft: 15,
                marginRight: 15,
                padding: 10
              }}>
                <Text
                  style={{
                    color: '#16416e',
                    fontFamily: 'Khula-Bold',
                    textTransform: 'capitalize',
                    fontSize: 20
                  }}>
                  {myCount++ + ' - ' + p.QUESTION_TEXT}
                </Text>
                <View style={{ marginTop: 15 }}>
                  <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value} key={myCount - 1}>
                    <View style={{ flexDirection: 'row' }}>
                      <RadioButton key={"S" + myCount - 1} color='#1b2f75' uncheckedColor='#1b2f75' value="S" />
                      <Text onPress={() => { setValue("S") }} style={{ fontFamily: 'Khula-Bold', color: '#16416e', fontSize: 20, marginTop: 5, marginLeft: 5, paddingBottom: 15 }} >Sim</Text>
                    </View>
                    <View style={{ flexDirection: 'row' }}>
                      <RadioButton key={"N" + myCount - 1} color='#1b2f75' uncheckedColor='#1b2f75' value="N" />
                      <Text onPress={() => { setValue("N") }} style={{ fontFamily: 'Khula-Bold', color: '#16416e', fontSize: 20, marginTop: 5, marginLeft: 5, paddingBottom: 15 }}>N?o</Text>
                    </View>
                    <View style={{ flexDirection: 'row' }}>
                      <RadioButton key={"NA" + myCount - 1} color='#1b2f75' uncheckedColor='#1b2f75' value="NA" />
                      <Text onPress={() => { setValue("NA") }} style={{ fontFamily: 'Khula-Bold', color: '#16416e', fontSize: 20, marginTop: 5, marginLeft: 5, paddingBottom: 15 }}>N/A</Text>
                    </View>
                  </RadioButton.Group>
                </View>
              </View>
            );
          })}
      </ScrollView>

question from:https://stackoverflow.com/questions/65945113/how-to-change-value-only-from-radio-button-group-in-react-native

Answer 1

Waitting for answers