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?