Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Native Radio Button Inside ListView

$
0
0

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.

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.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>