Bonjour je suis nouveau en react native et je rencontre un problème j'essaie de créer mon component option qui aura plusieurs section avec des boutons radio. Comme sur une application de livraison où on choisis par exemple les options de commande pour un menu. j'ai pu créer les boutons radio avec les donné que j'ai déclaré en constant seulement le problème c'est que j'arrive pas a faire en sorte qu'on puisse cocher une valeur dans chaque section. ce qui veut dire qu'avec tous les section je ne peux cocher qu'une valeur. et c'est pas vraiment ce que je souhaite. je vous mets en dessous mon code. j'aimerais récupérer la valeur sélectionné dans chaque section et le stocker dans une variable un tableau serai super et je sais pas comment m'y prendre.

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const products = [
  {
    id: 1,
    title: 'Soft Drinks',
    data: [
      {
        label: 'Coca Cola',
        price: '500 KMF',
      },
      {
        label: 'Fanta',
        price: '250 KMF',
      },
      {
        label: 'Sprite',
        price: '200 KMF',
      },
    ],
  },
  {
    id: 2,
    title: 'Juices',
    data: [
      {
        label: 'Mango',
        price: '500 KMF',
      },
      {
        label: 'Orange',
        price: '250 KMF',
      },
      {
        label: 'Strawberry',
        price: '200 KMF',
      },
    ],
  },
];

class RadioButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: [],
    };
  }

  radioClick(label) {
    this.setState({
      selectedValue: [label]
    })
  }

  render() {

    console.log(this.state.selectedValue)

    return (
      <View>
        {products.map((object, d) => (
          <View key={products.id} style={styles.sectionContainer}>
            <Text style={styles.sectionTitle}>{object.title}</Text>
            {object.data.map((item, i) => (
              <View>
                <TouchableOpacity
                  key={item.label}
                  onPress={this.radioClick.bind(this, item.label)}
                  style={styles.radio}>
                  <View style={styles.radioContainer}>
                    {item.label == this.state.selectedValue ? (
                      <View style={styles.activeButton} />
                    ) : null}
                  </View>
                  <Text style={styles.label}>{item.label}</Text>
                  <Text style={styles.price}>+ {item.price}</Text>
                </TouchableOpacity>
              </View>
            ))}
          </View>
        ))}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  sectionContainer: {
    paddingHorizontal: 20,
    paddingVertical: 5,
    backgroundColor: 'rgba(0,0,0,0.06)',
  },
  sectionTitle: {
    letterSpacing: 2,
    fontWeight: '500',
    color: '#737372',
    fontSize: 14,
  },
  radio: {
    flexDirection: 'row',
    paddingHorizontal: 15,
    paddingVertical: 12,
    alignItems: 'center',
    position: 'relative',
  },
  radioContainer: {
    height: 20,
    width: 20,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  activeButton: {
    height: 12,
    width: 12,
    borderRadius: 6,
    backgroundColor: '#000',
  },
  label: {
    marginHorizontal: 10,
    fontSize: 18,
    fontWeight: '500',
    letterSpacing: 1.5,
  },
  price: {
    fontSize: 17,
    fontWeight: '500',
    letterSpacing: 1.5,
    textAlign: 'right',
    color: '#737372',
    position: 'absolute',
    right: 15,
  },
});

export default RadioButton;