title: I want to use the data from a JSON file as the label for my radio button (react native)
body: <p>I have an app that reads a JSON file. In one tab I have it coming out as a list, on another tab, I want it to show the items selected from the file as the labels for a radio button I found here:</p>
  
  <pre><code>https://www.npmjs.com/package/react-native-radio-buttons-group
  </code></pre>
  
  <p>Here's the code that I have for the tab of my app that pulls names of medications from a JSON file:</p>
  
  <pre><code>import React, { Component } from "react";
  import {
      View,
      Text,
      StyleSheet,
      TouchableHighlight,
      FlatList
  } from "react-native";
  import { Icon } from 'native-base'
  import RadioGroup from 'react-native-radio-buttons-group';
  
  //import MultipleChoice from 'react-native-multiple-choice'
  
  
  class LikesTab extends Component {
  
    _onSelect = ( item ) =&gt; {
         console.log(item);
       };
  
       onPress = data =&gt; this.setState({ data });
  
    constructor(props){
      super(props);
  
      this.state = {
        data:[]
      }
    }
  
  //SETTING THE STATE MAKING AN EMPTY ARRAY WHICH WE FIL
  //  state = {
    //  data: []
    //};
  
    componentWillMount() {
      this.fetchData();
    }
  
  //Getting the data
  fetchData = async () =&gt; {
    const response = await fetch("https://api.myjson.com/bins/s5iii");
    const json = await response.json();
    this.setState({ data: json.results });
  };
  
    //var customData = require('./customData.json');
  
  
  //Setting what is shown
  render() {
  
  
    return (
      &lt;View style={{ marginVertical: 10, backgroundColor: "#E7E7E7" }} &gt;
        &lt;FlatList
          data={this.state.data}
          keyExtractor={(x, i) =&gt; i}
          renderItem={({ item }) =&gt;
            &lt;Text&gt;
              {`${item.name.first} ${item.name.last}`}
            &lt;/Text&gt;}
  
        /&gt;
  
  
  
  
      &lt;/View&gt;
    );
  }
  }
  
  export default LikesTab;
  
  
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center'
      }
  });
  </code></pre>
  
  <p>Here's my tab for the radio button</p>
  
  <pre><code>    import React, { Component } from 'react';
  import { Text, View, StyleSheet } from 'react-native';
  
  import RadioGroup from 'react-native-radio-buttons-group';
  
  export default class AddMediaTab extends Component {
  
    componentWillMount() {
      this.fetchData();
    }
  
  //Getting the data
  fetchData = async () =&gt; {
    const response = await fetch("https://api.myjson.com/bins/s5iii");
    const json = await response.json();
    this.setState({ data: json.results });
  };
  
      state = {
          data: [
              {
                  label:' ' ,
              }
  
          ]
      };
  
  
  
      // update state
      onPress = data =&gt; this.setState({ data });
  
      render() {
          let selectedButton = this.state.data.find(e =&gt; e.selected == true);
          selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;
          return (
              &lt;View style={styles.container}&gt;
                  &lt;Text style={styles.valueText}&gt;
                      Value = {selectedButton}
                  &lt;/Text&gt;
                  &lt;RadioGroup radioButtons={this.state.data} onPress={this.onPress}
                   /&gt;
  
              &lt;/View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
      },
      valueText: {
          fontSize: 18,
          marginBottom: 50,
      },
  });
  </code></pre>