title: how to fetch and display API content Onsubmit
body: <p>I am developing a weather forecast app using Reactjs but i'm having a  hard time Fetching/displaying API data </p>
  
  <p>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 </p>
  
  <pre><code>//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 =&gt; {
          //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 =&gt; { response.json() })
          .then(data =&gt; { 
              console.log(data);
              this.setState({ reports: data.list})
          });
      }
  }
  
  
      render(){
          return(
              &lt;div className="weather-app"&gt;
                  &lt;WeatherAppHeader /&gt;
                  &lt;div className="weather-body"&gt;
                      &lt;div className="entry-pane"&gt;
                          &lt;form onSubmit ={this.onSubmit} &gt;
                              &lt;input 
                                  type="text" 
                                  id="search-box"
                                  placeholder="Location e.g Abuja, NG" 
                                  size="40" 
                                  ref={input =&gt; this.searchbox = input} /&gt;
  
                              &lt;button type="submit" id="search-btn"&gt;search&lt;/button&gt; 
                          &lt;/form&gt;
                      &lt;/div&gt;
                      &lt;SearchedLocation  location={this.state.location} /&gt;
                      &lt;WeatherReport  reports={this.state.reports} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          );
      }
  }
  
  const WeatherAppHeader = () =&gt; ( 
      &lt;nav&gt; WEATHER FORECAST &lt;/nav&gt;
  );
  
  
  const SearchedLocation = ({location}) =&gt; ( 
      &lt;div className="searched-loc"&gt;{location}&lt;/div&gt;
  );
  SearchedLocation.propTypes = {
      location: PropTypes.string
  }
  
  
  ///Declaring state within the WeatherReport component 
  
  const WeatherReport = ({reports}) =&gt; (
          &lt;div className="weather-report" &gt;
              &lt;ul className="report-list"&gt;
              {reports.map(report =&gt; ( 
                  &lt;li key={report.id} className="daily-report"&gt;
                      &lt;span className="daily-report-day"&gt;{report.day}&lt;/span&gt;&lt;br/&gt;
                      &lt;span className="daily-report-icon"&gt;{report.icon}&lt;/span&gt;&lt;br/&gt;
                      &lt;span className="daily-report-temp"&gt;{report.main.temp}&lt;/span&gt;
                  &lt;/li&gt;
              ))}
              &lt;/ul&gt;
          &lt;/div&gt;
  
  );
  
  WeatherReport.propTypes = {
      report: PropTypes.array
  }
  
  
  
  
  
  ReactDOM.render(&lt;WeatherApp /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>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?</p>