I can’t seem to get the data I extracted from the Open Weather API to display on my web page. My idea was to create a WeatherCard component that would house both the CurrentWeather and Forecast components. Right now, I’m taking small steps and just trying to display the data for CurrentWeather.
WeatherCard
import React from 'react';
import CurrentWeather from "./Current_Weather";
import Forecast from "./Forecast";
export default class WeatherCard extends React.Component {
render() {
const {
data
} = this.props
return (
<CurrentWeather
city={data.city}
temp={data.temp}
/>
)
}
}
CurrentWeather
import React from 'react';
export default class CurrentWeather extends React.Component {
render() {
const {
city,
temp,
hiTemp,
lowTemp,
description,
icon
} = this.props;
return (
<div className="currentWeatherCard">
<div className="city">
<h3>{city}</h3>
</div>
<div className="currentTemp">
<h4>{temp}</h4>
</div>
</div>
)
}
}
And then here, in the main App component, I’m trying to display the data:
this.state = {
search_query: '',
data: {
currentWeatherData: null,
forecastData: null,
},
loading: false
}
...
...
render() {
return (
<div className="main-wrapper">
<header id="header_text"><strong>Weather App</strong></header>
<Search_Bar
onChange={(event) => this.handleChange(event)}
search_query={this.state.search_query}
onClick={() => this.handleClick()}
/>
<div className="results">
<WeatherCard data={this.state.data.currentWeatherData}/>
</div>
</div>
)
}
}
But then I get a TypeError that claims the city prop of the CurrentWeather was undefined. I’m just confused here because I thought I did, in fact, define it:
const {
city,
temp,
hiTemp,
lowTemp,
description,
icon
} = this.props;
Is there something I’m missing here?
