What is the best way to construct a dropdown and fetch JSON data dynamically from a URL

Question

My dropdown has three Items ===> Item0,Item1,Item2 . Every time I select a particular item, I would like to fetch the JSON data and display it on the page (on IOS). I do not understand where exactly to define the onPress event for the Dropdown. Any help would be appreciated.

    const leveldata = [
        { value: 'level1', props: { disabled: true } },
        { value: 'level2' },
        { value: 'level3' },

];class TopScores extends Component {
    constructor(props) {
        super(props);
        this.onChangeText = this.onChangeText.bind(this);
        this.state = {
            data: [],
        };
    }

    onChangeText() {
        if (leveldata.value === 'leve1') {
            fetch('url')
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                  newdata: responseData.newdata,
                });
            })
            .done();
        } else if (leveldata.value === 'level2') {
            fetch('url1')
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                  newdata: responseData.newdata,
                });
            })
            .done(); 
        }
    }
render() {
        console.log('data:', this.state.data);
        return (
            <View>
                <View style={styles.container1}>
                    <Image
                        /* eslint-disable global-require */
                        source={require('../Images/Top.png')}
                    /* eslint-enable global-require */
                    />
                    <Text style={styles.Text1}> Top Contenders</Text>
                </View>
                <View>
                    <Dropdown
                        data={leveldata}
                        label='Level'
                        onChangeText={this.onChangeText}
                    />
                </View>
            </View>
        );
    }
}

Answer 1

If I remember correctly you need to add the onChangeText prop.

import React, { Component } from 'react';

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

import { Dropdown } from 'react-native-material-dropdown';

const leveldata = [
  { value: 'level1', props: { disabled: true } },
  { value: 'level2' },
  { value: 'level3' }
];

class TopScores extends Component {
  constructor(props) {  
    super(props);

    this.onChangeText = this.onChangeText.bind(this);

    this.state = {
      data: []
    };
  }

  onChangeText(text) {
    if(text === 'leve1'){
      fetch('url')
        .then((response) => response.json())
        .then((responseData) => {
          this.setState({
            newdata: responseData.newdata,
          });
        })
        .done();
    }
  }

  render() {
    return (
      <View>
        <Dropdown
          data={leveldata}
          label='Level'
          onChangeText={this.onChangeText} />
      </View>
    );
  }
}