Creating Drop down list in react native - react-native

Question

I am creating a UI for Coronavirus tracking. So I need a drop-down list to fetch data of different countries on clicking specific country.I am sharing the code segment.Any help would be appreciable.
import React from "react";
import Axios from "axios";
import { StyleSheet, View, ImageBackground, Text, Image, Picker } from "react-native";
import { Dropdown } from "react-native-material-dropdown";
export default class App extends React.Component {
constructor(props) {
super(props);
this.getCountryData = this.getCountryData.bind(this);
}
state = {
confirmed: 0,
recovered: 0,
deaths: 0,
countries: []
}
componentDidMount() {
this.getData();
}
async getData() {
const resApi = await Axios.get("https://covid19.mathdro.id/api");
const resCountries = await Axios.get("https://covid19.mathdro.id/api/countries");
const countries = [];
for (var i=0; i < resCountries.data.countries.length; i++) {
countries.push(resCountries.data.countries[i].name);
}
this.setState({
confirmed: resApi.data.confirmed.value,
recovered: resApi.data.recovered.value,
deaths: resApi.data.deaths.value,
countries
});
}
async getCountryData(event){
try {
const res = await Axios.get(`https://covid19.mathdro.id/api/countries/${event.target.value}`);
this.setState({
confirmed: res.data.confirmed.value,
recovered: res.data.recovered.value,
deaths: res.data.deaths.value
})}
catch (err) {
if(err.response.status === 404)
this.setState({
confirmed: "No data available",
recovered: "No data available",
deaths: "No data available"
})
}
}
renderCountryOptions() {
return this.state.countries.map((name, i) => {
return <Text key={name}>{name}</Text>
});
}
render() {
return (
<View style={styles.container}>
<View style={{justifyContent: 'center',alignItems: 'center'}}>
<View style={{height: 150, top:29,width:900, backgroundColor: 'steelblue'}} />
<Text style={styles.text}>COVID-19 Cases Overview</Text>
</View>
<Image
source={require("./assets/Covid-19.jpg")}
resizeMode="contain"
style={styles.image}
>
</Image>
<Text style={styles.text1}>Global Data</Text>
<View style={styles.dropDown}>
<Dropdown onChange={this.getCountryData}>
{this.renderCountryOptions()}
</Dropdown>
</View>
<View>
<View style={styles.boxConfirmed}>
<Text>Confirmed </Text>
<Text>{this.state.confirmed}</Text>
</View>
<View style={styles.boxRecovered}>
<Text>Recovered</Text>
<Text>{this.state.recovered}</Text>
</View>
<View style={styles.boxDeaths}>
<Text> Deaths</Text>
<Text>{this.state.deaths}</Text>
</View>
</View>
</View>
);
}
}
I am unable to extract data of individual country. Please suggest me how I can use Dropdown in React Native

Answer 1

You can use react native picker from react native community for the task...
<Picker
selectedValue={this.state.language}
style={{height: 50, width: 100}}
onValueChange={(itemValue, itemIndex) =>
this.setState({language: itemValue})
}>
this.state.list.map((val) => {
<Picker.Item label=val value=val />
})