I need to add separate radio button for every item that comes from API in React native

Viewed 42

Screen shot of mobile. Currently I press on one radio button and it shows me this result:

Screen shot of mobile. Currently I press on one radio button and it shows me this result

Image of expected behavior of radio button:
Image of expected behavior of radio button

I have added the radio button with every item that comes from flatlist (API). I want that when I click on one radio button, only that one will be selected, just like I in expected behavior. But when I click on on radio button, all radio button are selected.

My code

const [selectedIndex, setSelectedIndex] = useState(0)
    const [radioButtonValue, setRadioButtonValue] = useState('1')

    const onPress = (index) => {
        setSelectedIndex(index)
    };

    const onRadiochange = (index, value) => {
        setSelectedIndex(index)
        setRadioButtonValue(value)
    };

    const renderItem = ({ item }) => {
        const index = item.index;

        let items = []
        if (item.audit_sub_category) {
            items = item.audit_sub_category.map((audit_sub_category) => {
                return (
                    <>
                        <View style={{
                            flexDirection: "row",
                            alignItems: 'center',
                            maxWidth:200
                        }}>
                            <Text >
                                {audit_sub_category.name}
                                {"\n"}
                                {/* {audit_sub_category[0]} */}
                            </Text>

                            <RadioButton.Group 
                            onValueChange={(value) =>
                                onRadiochange(index, value)
                            }>
                                <View style={styles.singleRadioButtonContainer}>
                                    <Text>Yes</Text>
                                    <RadioButton
                                        color="#5d86d7"
                                        value="1"
                                        status={
                                            selectedIndex === index &&
                                                radioButtonValue === '1'
                                                ? 'checked'
                                                : 'unchecked'
                                        }
                                    onPress={() => { onPress(index) }}
                                    
                                    />
                                </View>

                                <View style={styles.singleRadioButtonContainer}>
                                    <Text>No</Text>
                                    <RadioButton
                                        color="#5d86d7"
                                        value="0"
                                        status={
                                            selectedIndex === index &&
                                                radioButtonValue === '0'
                                                ? 'checked'
                                                : 'unchecked'
                                        }
                                    onPress={() => {onPress(y)}}
                                    
                                    />
                                </View>
                            </RadioButton.Group>

                        </View >
                    </>
                )
            })
        }

Other return code

return (
            <ScrollView style={GlobalSS.scrollviewcontainer}>

                <Text style={styles.textStyle}>
                    {item.name}
                </Text>

                <View
                    style={{
                        flexDirection: 'row',
                        justifyContent: 'space-evenly',
                        marginHorizontal: 20
                    }}>

                    <Text style={{ alignSelf: "center", }}>
                        {items}
                    </Text>

                </View>
            </ScrollView>
        );
    }

Flatlist code

<FlatList
                style={styles.container}
               
                data={audit}
                renderItem={renderItem}
                keyExtractor={(item, index) => index.toString()}
                refreshControl={
                    <RefreshControl
                        refreshing={refreshing}
                        onRefresh={fetchAuditData} />
                }
                ListEmptyComponent={myListEmpty}
            />
1 Answers

RadioButton has a property called isSelected which gets a boolean. You should write a condition and check your selectedIndex state. if the related RadioButton is selected, pass true.

 <RadioButton
   ...
  isSelected={
  selectedIndex === 0// index of this RadioButton
   }
   ...
/>
Related