how to fetch and display API content Onsubmit - reactjs

Question

I am developing a weather forecast app using Reactjs but i'm having a hard time Fetching/displaying API data
I know this question might have a duplicate but i have looked up all related problems/solutions on this platform and elsewhere but none solved my problem
//const API;
class WeatherApp extends React.Component{
constructor(props){
super(props);
this.state = {
location: "",
reports:[]
}
}
//functions should be written outside the constructor method
onSubmit = event => {
//prevents default loading of the page when this function "onSubmit"
//is called
event.preventDefault();
//saving the value of the textbox to a variable/const
if(this.searchbox.value !== ""){
const searchResult = this.searchbox.value;
//update the state object
this.setState({
location: searchResult + " weather report"
});
}else{
alert("please ensure that field is not empty!");
return;
}
};
componentDidMount(){
if(this.searchbox.value !== ""){
fetch(`api.openweathermap.org/data/2.5/forecast?q=london,uk ${/*this.searchbox.value +*/ KEY}`,{
method: "GET",
dataType: "JSON",
headers: {
"Content-Type": "application/json; charset=utf-8",
}
})
.then(response => { response.json() })
.then(data => {
console.log(data);
this.setState({ reports: data.list})
});
}
}
render(){
return(
<div className="weather-app">
<WeatherAppHeader />
<div className="weather-body">
<div className="entry-pane">
<form onSubmit ={this.onSubmit} >
<input
type="text"
id="search-box"
placeholder="Location e.g Abuja, NG"
size="40"
ref={input => this.searchbox = input} />
<button type="submit" id="search-btn">search</button>
</form>
</div>
<SearchedLocation location={this.state.location} />
<WeatherReport reports={this.state.reports} />
</div>
</div>
);
}
}
const WeatherAppHeader = () => (
<nav> WEATHER FORECAST </nav>
);
const SearchedLocation = ({location}) => (
<div className="searched-loc">{location}</div>
);
SearchedLocation.propTypes = {
location: PropTypes.string
}
///Declaring state within the WeatherReport component
const WeatherReport = ({reports}) => (
<div className="weather-report" >
<ul className="report-list">
{reports.map(report => (
<li key={report.id} className="daily-report">
<span className="daily-report-day">{report.day}</span><br/>
<span className="daily-report-icon">{report.icon}</span><br/>
<span className="daily-report-temp">{report.main.temp}</span>
</li>
))}
</ul>
</div>
);
WeatherReport.propTypes = {
report: PropTypes.array
}
ReactDOM.render(<WeatherApp />, document.getElementById('root'));
i want to display all data from the API on the browser console when the form is submitted but to no avail...and theres no error message. pls can anyone help?

Answer 1

After your fetch call, you are not correctly returning the response when you do .then(response => { response.json() }). Just remove the curly-braces, that way you do an implicit return. Otherwise, if you use curly-braces you must explicitly write .then(response => { return response.json() })
Working code:
componentDidMount(){
if(this.searchbox.value !== ""){
fetch(`api.openweathermap.org/data/2.5/forecast?q=london,uk ${/*this.searchbox.value +*/ KEY}`,{
method: "GET",
dataType: "JSON",
headers: {
"Content-Type": "application/json; charset=utf-8",
}
})
.then(response => response.json())
.then(data => {
console.log(data);
this.setState({ reports: data.list})
});
}
}