Rendering a map with an API in react native - reactjs

Question

I am currently trying to build a currency convertor with react native but I cannot seem to render this API data back as a map and then into a rate. If anyone can guide me I would really appreciate. I would like to use the API response as a number and mathematically calculate input and provide out which is the users input converted.
The error Im getting is that undefined is not a function(near '...this.state.rates.map...')
The commented out part is to be ignored.
The following is my code:
import React from 'react';
import {AppRegistry, Text, View, Alert} from 'react-native';
const rate = 'https://free.currencyconverterapi.com/api/v6/convert?q=GBP_PKR&compact=ultra&apiKey=59825436b2556cde7205';
class Rates extends React.Component {
constructor(props) {
super(props);
this.state = {
rates: 1,
}
}
componentDidMount() {
fetch('https://free.currencyconverterapi.com/api/v6/convert?q=GBP_PKR&compact=ultra&apiKey=59825436b2556cde7205')
.then(res => res.json())
.then(data => this.setState({rates: data.rate}));
console.log(rates.data);
}
render() {
const rateNumber = this.state.rates.map(function(listItem, index){
<View key={index}>
<Text> {listItem.rate}</Text>
</View>
});
return (
<View>
<Text>Rate for today </Text>
<Text>{rateNumber}</Text>
</View>
)
}
}
export default Rates;
App
import React from 'react';
import {ListView, StyleSheet,RefreshControl, Text,TextInput, TouchableOpacity, View } from 'react-native';
import Rates from './data/Rates';
class App extends React.Component {
constructor(props){
super(props);
this.state = {
gbp: '',
pkr: '',
rate: [],
}
}
/*componentDidMount() {
fetch('https://free.currencyconverterapi.com/api/v6/convert?q=GBP_PKR&compact=ultra&apiKey=59825436b2556cde7205')
.then(response => response.json())
.then(data=> this.setState({ rate: [data] }));
}
*/
convert() {
const gbp = this.state.gbp;
const pkr = this.state.pkr;
const total = gbp*pkr;
console.log(total);
}
render() {
const rate = this.state;
const amount = JSON.stringify(rate.rate);
return (
<View style={styles.container}>
<View>
<Text>{amount}</Text>
<View><Rates/></View>
</View>
<TextInput
placeholder="GBP"
value={this.state.gbp}
onChangeText={(gbp) => this.setState({ gbp })}
keyboardType='numeric'
/>
<TextInput
placeholder="PKR"
value={this.state.pkr}
onChangeText={(pkr) => this.setState({ pkr })}
keyboardType='numeric'
/>
<TouchableOpacity onPress={() =>this.refreshDataFromServer()}>
<Text value={this.state.rate}> Convert</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;