skip to Main Content

DISCLAMER!! I’ve looked everywhere and tried: React-Native-Paper,
react-native-radio-buttons-group and react-native-simple-radio-button
but have not found what I’m looking for. DISCLAMER!!

I’m trying to create radio buttons that should exist inside a loop. The loop, loops through a list of questions and underneath each question the user should be prompted with YES – NO – N/A. I’ve been able to accomplish this but everytime I click one radio button ALL the other radio buttons with the same answer gets checked.

enter image description here

See below for code!

This is the setup at the start of the component:

 const radioButtonsData: RadioButtonProps[] = [{
  id: '1', // acts as primary key, should be unique and non-empty string
  label: 'YES',
  value: 'na'
}, {
  id: '2',
  label: 'NO',
  value: 'no'
}, {
  id: '3',
  label: 'N/A',
  value: 'na'
}]

const [radioButtons, setRadioButtons] = useState<RadioButtonProps[]>(radioButtonsData)

function onPressRadioButton(radioButtonsArray: RadioButtonProps[]) {
        setRadioButtons(radioButtonsArray);
        console.log(radioButtonsArray)
    }

This is the actual loop:

 {props.subTaskList?.map((item, subTaskKeyAcc)  => {   
   return(
  <Collapsible collapsed={collapsed} align="center" key={subTaskKeyAcc}>
    
        <View>
        <Text>{item.subTaskName}</Text>
        <RadioGroup key={Math.random()}
            radioButtons={radioButtons} 
            onPress={onPressRadioButton} 
        />
</View>   
  </Collapsible>
        )})}

I’m guessing I’ve to create something unique for each radio button inside the loop, but I really can’t find a solution for this problem. Would be very grateful for some help.

2

Answers


  1. Chosen as BEST ANSWER

    If anyone else have this problem:

    I solved it by installing react-native-flexi-radio-button. It was the only library that worked using a loop with radio buttons.


  2. OnPressRadio should be able to take a parameter which is your item id and change it in your subtasklist with that key using findIndex : identify your item with its key.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search