I have to add multiple choice radio button in React native

Question

Each item will have two radio buttons one is Yes and one is No. I have added the radio button with every item that comes from Flatlist (API). error is When I select one of the 8 radio button in front of the four item, only one of the 8 radio button is selected.

here is my expo code you can edit expo snack code

currently my screen shows like this expected behavior

Answer 1

https://snack.expo.dev/YNxLxt8pu

 import React, { useEffect, useState } from 'react'; import { View, Text, TouchableOpacity, StyleSheet, Image, ScrollView, FlatList, SafeAreaView, RefreshControl, Vibration, ActivityIndicator, } from 'react-native'; import { Card, TextInput, RadioButton } from 'react-native-paper'; const auditParam = [ { id: 1, name: 'Category 1', parent_id: 0, status: 'active', audit_sub_category: [ { id: 15, name: 'a Sub 2a', parent_id: 1, status: 'active', }, { id: 16, name: 'a Sub 2abc', parent_id: 1, status: 'active', }, ], }, { id: 4, name: 'Category 2b', parent_id: 0, status: 'active', audit_sub_category: [ { id: 5, name: '2b Sub 1', parent_id: 4, status: 'active', }, { id: 12, name: '2b Sub 3', parent_id: 4, status: 'active', }, ], }, { id: 6, name: 'Category 3c', parent_id: 0, status: 'active', audit_sub_category: [ { id: 7, name: '3c Sub 1', parent_id: 6, status: 'active', }, { id: 10, name: '3c Sub 2', parent_id: 6, status: 'active', }, ], }, ]; export default function App() { const getState = () => { let objData = {}; auditParam.map((data) => { data?.audit_sub_category.map((newData) => { let obj = { id:newData?.id, sel:false } objData[newData.id] = null }) }) return objData } const [cat,setCat] = useState(getState()); const onPress = (index,value) => { const existing = {...cat}; existing[index] = value setCat(existing) }; const onRadiochange = (index, value) => { const existing = {...cat}; existing[index] = value setCat(existing) }; const renderItem = ({ item }) => { let items = []; if (item.audit_sub_category) { items = item.audit_sub_category.map((audit_sub_category) => { const index = audit_sub_category.id; return ( <> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: 280, }}> <Text>{audit_sub_category.name}</Text> <RadioButton.Group > <View style={styles.singleRadioButtonContainer}> <Text>Yes</Text> <RadioButton color="#5d86d7" value="1" // key={index} status={ cat[index] === true? 'checked': 'unchecked' } onPress={() => { onPress(index,true); }} /> </View> <View style={styles.singleRadioButtonContainer}> <Text>No</Text> <RadioButton color="#5d86d7" value="0" key={index} status={ cat[index] === false? 'checked': 'unchecked' } onPress={() => { onPress(index,false); }} /> </View> </RadioButton.Group> </View> </> ); }); } return ( <ScrollView> <Text style={styles.textStyle}>{item.name}</Text> <View style={{ flexDirection: 'row', justifyContent: 'space-evenly', marginHorizontal: 20, }}> <Text style={{ alignSelf: 'center' }}>{items}</Text> </View> </ScrollView> ); }; return ( <SafeAreaView style={styles.container}> <FlatList style={styles.container} // data={data} data={auditParam} renderItem={renderItem} keyExtractor={(item, index) => index.toString()} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 2, backgroundColor: 'white', }, textStyle: { marginHorizontal: 20, marginTop: 10, color: 'black', fontWeight: '600', }, singleRadioButtonContainer: { flexDirection: 'row', alignItems: 'center', marginRight: 10, }, });

Hope it helps