How to get the values of Selected Radio buttons from Radio Groups

Question

Im using react-native-flexi-radio-button for RadioGroup

I have a design like multiple options.

[
        {
            "option": {
                "id": 4,
                "name": "Size"
            },
            "values": [
                {
                    "products_attributes_id": 243,
                    "id": 18,
                    "value": "XL",
                    "price": "0.00",
                    "price_prefix": "+"
                },
                {
                    "products_attributes_id": 245,
                    "id": 19,
                    "value": "L",
                    "price": "0.00",
                    "price_prefix": "+"
                },
                {
                    "products_attributes_id": 246,
                    "id": 20,
                    "value": "M",
                    "price": "0.00",
                    "price_prefix": "+"
                },
                {
                    "products_attributes_id": 247,
                    "id": 21,
                    "value": "S",
                    "price": "0.00",
                    "price_prefix": "+"
                },
                {
                    "products_attributes_id": 248,
                    "id": 22,
                    "value": "XXL",
                    "price": "20.00",
                    "price_prefix": "+"
                }
            ]
        },
[![\]

My Coding to show RadioGroup -

                         <RadioGroup
                            style={{flexDirection: 'row'}}
                            size={20}
                            thickness={2}
                            color="#144693"
                            selectedIndex={0}

                            // onSelect={(item) => onSelect(item, i++)}
                          >
                            {item.values.map((c, i) => (
                              <RadioButton value={c}>
                                <Text>{c.value}</Text>
                              </RadioButton>
                            ))}
                          </RadioGroup>

Showing like this.

Now there are two attributes Size and Color, there may by n- numbers of attributes.

How to get the values of each group ?

Something like - Array ( [0] => 001 [1] => 101 )

Answer 1

That lib don't have a method o property get all the values. You can look here.

As a workaround if you are using map in each group to render the items maybe you can add a new property in your object schema to keep track of the selected items or creating an state to track the values.

Answer 2

I don't know if I understood perfectly, but from what I understand you can get value on onSelect callback, it is called with two arguments, index and value when you click in an option.

<RadioGroup
    style={{flexDirection: 'row'}}
    size={20}
    thickness={2}
    color="#144693"
    selectedIndex={0}
    onSelect={(index, value) => console.log(index, value)} // --> here
>
    {item.values.map((c, i) => (
        <RadioButton value={c}>
            <Text>{c.value}</Text>
        </RadioButton>
    ))}
</RadioGroup>