I am new to React Native and I'm working with the expo-radio-button component.
However, I'm facing an issue where I can't seem to select only one radio button at a time in a flatlist.
When I try to select a single button, it ends up selecting more than one button.
Can someone help me fix this issue? I want to display and select 'yes' or 'no' for each question using radio buttons.
Click here to see the desired output
const myArray = [
{
isSignReq: "1",
sno: "1",
yesno: "0",
},
{
isSignReq: "1",
sno: "2",
yesno: "0",
},
{
isSignReq: "1",
sno: "3",
yesno: "0",
},
];
const [account, setAccount] = useState([]);
const setFormSubmit = (val) => {
console.log(val);
};
<FlatList
data={myArray}
keyExtractor={() => {
return (
new Date().getTime().toString() +
Math.floor(Math.random() * Math.floor(new Date().getTime())).toString()
);
}}
renderItem={(itemData) => {
return (
<View style={{ flexDirection: "row", marginVertical: "2%" }}>
<Text style={styles.data1}>{itemData.item.sno}</Text>
<Text style={styles.data2}>{itemData.item.name}</Text>
<View style={{ width: "30%", marginLeft: "1%" }}>
<RadioButtonGroup
onSelected={(value) => {
setFormSubmit(value), setAccount(value);
}}
selected={account}
size={22}
containerStyle={{ flexDirection: "row" }}
>
<RadioButtonItem label={"Yes"} value={itemData.item.isSignReq} />
<RadioButtonItem label={"No"} value={itemData.item.yesno} />
</RadioButtonGroup>
</View>
</View>
);
}}
/>