DISCLAMER!! I've looked everywhere and tried: React-Native-Paper,react-native-radio-buttons-group and react-native-simple-radio-buttonbut 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.
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.