I want to use the data from a JSON file as the label for my radio button (react native)

Question

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:

https://www.npmjs.com/package/react-native-radio-buttons-group

Here's the code that I have for the tab of my app that pulls names of medications from a JSON file:

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 ) => {
       console.log(item);
     };

     onPress = data => 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 () => {
  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 (
    <View style={{ marginVertical: 10, backgroundColor: "#E7E7E7" }} >
      <FlatList
        data={this.state.data}
        keyExtractor={(x, i) => i}
        renderItem={({ item }) =>
          <Text>
            {`${item.name.first} ${item.name.last}`}
          </Text>}

      />




    </View>
  );
}
}

export default LikesTab;



const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

Here's my tab for the radio button

    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 () => {
  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 => this.setState({ data });

    render() {
        let selectedButton = this.state.data.find(e => e.selected == true);
        selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;
        return (
            <View style={styles.container}>
                <Text style={styles.valueText}>
                    Value = {selectedButton}
                </Text>
                <RadioGroup radioButtons={this.state.data} onPress={this.onPress}
                 />

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    valueText: {
        fontSize: 18,
        marginBottom: 50,
    },
});

Answer 1

What is your selectedButton variable? I think Value = {selectedButton} is the issue. If selectedButton evaluates to a string, fine but it looks like it is an object in your case. Array.find() returns the first element that satisfies the condition, or if none satisfy it it returns undefined. If that variable undefined during the time it's waiting for your api call to return something that could cause an issue as well.