Radio button list not working in for loop react native

Question

I'm using radio button paper package for radio button. I used radio group and render radio button in a loop. i want to get value of radio button on change event.

Here is my function of radio button group :

loadCosts(item) {
    var cont = 0;
    var output=[];
    for (var i = 0; i < this.cost_length; i++) {
      var days = item.cost[i].days;
      var cost = item.cost[i].cost;
      var tempItem=  (
        <View key={i} style={{flexDirection:'row'}}>
          <RadioButton value={i} onPress={() => {this.setState({ days:days, price:cost[![enter image description here][1]][1] })}} />
          <Text style={[styles.fontSmall,styles.colorTheme,styles.radioButtonText]}>Cost for {item.cost[i].days} £{item.cost[i].cost}</Text>
        </View>
     );
    output[i] = (tempItem);
   }

    return(
      <RadioButton.Group
        onValueChange={value => this.setState({ value:value })}
        value={this.state.value}
      >
        {output}
      </RadioButton.Group>
    )
  }

Answer 1

Use map not for. For itereates and thats it. You need to return an array of Components. Replace your output in return JSX with map:

loadCosts(item) {
  return(
    <RadioButton.Group
      onValueChange={value => this.setState({ value:value })}
      value={this.state.value}
    >
     {item.cost.map(({ days, cost }, i) => (
       <View key={i} style={{flexDirection:'row'}}>
         <RadioButton value={i} onPress={() => {this.setState({ days:days, price:cost[![enter image description here][1]][1] })}} />
         <Text style={[styles.fontSmall,styles.colorTheme,styles.radioButtonText]}>`Cost for ${days} £${cost}`</Text>
       </View>
     ))}
    </RadioButton.Group>
  )
}

Answer 2

We can also solve this problem by adding a image as a radio button(selected or unselected image ) and when we tap or click on a row, and then, change image dynamically.

<TouchableOpacity onPress={this.onPress} style={{ flex:1}}>
      <View style={{ flex: 1 }}>
      <View style={ViewStyles.rowContentView}>
      <View style={{ flex: 0.8 }}>{this.props.title}</View>
      <View style={{ flex: 0.1 }} />
      <Image source={this.state.selected ? radioSelectedImage.source : radioImageimage.source} style={image.style} />;
                 {this.renderDetailDisclosure()}
                </View>
            </View>
    </TouchableOpacity>