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 editexpo 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