fetch API (Error) Getting the same result - react-native

Question

I am developing a simple weather app using react-native. Using fetch-api, i am requesting for weather of cities based on thier IDs but even though i am inputting different city IDs, i am getting the same default result . Here is my code :-
This is my main component
import React, {Component} from 'react';
import {StyleSheet, Text, View, TextInput} from 'react-native';
import Forecast from "./Forecast";
import OpenWeatherMap from "./openweather"
export default class Weather extends Component {
state = {
forecast: null
}
handleTextChange = event => {
let zip = event.nativeEvent.text;
OpenWeatherMap.fetchForecast(zip).then(forecast => {
console.log(forecast);
this.setState({forecast: forecast});
});
}
render() {
let content = null;
if(this.state.forecast !== null){
content = (
<Forecast
main = {this.state.forecast.main}
description = {this.state.forecast.description}
temp = {this.state.forecast.temp} />
);
}
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Enter your City ID
</Text>
{content}
<TextInput
style={styles.input}
onSubmitEditing={this.handleTextChange} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#808000',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
input:{
fontSize: 20,
borderWidth: 2,
padding: 2,
height: 40,
width: 100,
textAlign: "center"
}
});
This is my child component used only for display purposes..
Forecast.js
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
class Forecast extends Component {
render(){
return(
<View style={styles.container}>
<Text style={styles.bigText}>
{this.props.main}
</Text>
<Text style= {styles.mainText}>
Current conditions: {this.props.description}
</Text>
<Text style= {styles.bigText}>
{this.props.temp} ^ F
</Text>
</View>
);
}
}
const styles= StyleSheet.create({
container: {height: 130},
bigText:{
flex:2,
fontSize: 20,
textAlign: "center",
margin: 10,
color: "#800000"
},
mainText : {flex:1, fontSize: 16, textAlign: "center", color: "#800000"}
});
export default Forecast;
This is where i use fetch api for requesting weather from openweathermap :-
const weather_api_key = "7e901f7ecb8b36c60ccca4a64c90ee1a";
const weather_url ="https://samples.openweathermap.org/data/2.5/weather?";
function zipurl(zip){
return `${weather_url}id=${zip}&APPID=${weather_api_key}`;
}
function fetchForecast(zip){
return fetch(zipurl(zip))
.then(response => response.json())
.then(responseJSON => {
return {
main:responseJSON.weather[0].main,
description:responseJSON.weather[0].description,
temp:responseJSON.main.temp
};
})
.catch(error=>{
console.error(error);
});
}
export default {fetchForecast: fetchForecast}
My path for different files is :-

Answer 1

You're using the samples.openweathermap.org endpoint, instead of the api.openweathermap.org endpoint. The second one is the one that you want to use, and that actually gives you different data depending on the query parameters.
By the way, thank you for posting the relevant code. It made it much easier to debug your problem. Although in my opinion, you posted much more than needed. I only used the last code snippet as that is where the problem lies. Not in the rendering of the data. Also for next time, consider adding a sample output of the API vs. what you were expecting. And I'd recommend you to change your API key now that you've got your solution.