title: Fetch in React.js not working
body: <p>I am trying to do a <code>fetch</code> request in react.js and I don't seem to be fetching anything. I feel as though it is a stupid mistake and I am not noticing it. Any help would be appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import './App.css';
  import TimeSearch from './TimeSearch.jsx';
  import CurrentTime from './CurrentTime.jsx';
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        list: []
      };
    }
  
    handleFormSubmit(item) {
      var url = 'https://api.aladhan.com/timingsByCity?city=' + item + '&amp;country=US&amp;method=2';
  
      fetch(url)
        .then(response =&gt; {
          return response.json();
        })
        .then(json =&gt; {
          this.setState({
            Fajir: json.Fajir,
            Sunrise: json.Sunrise,
            Dhuhr: json.Dhuhr
          });
        });
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;Welcome to Prayer Times!&lt;/h1&gt;
          &lt;h6&gt;Search for times in any city in the United States&lt;/h6&gt;
          &lt;TimeSearch
            handleFormSubmit={item =&gt; {
              this.handleFormSubmit(item);
            }}
          /&gt;
          &lt;CurrentTime Fajir={this.state.Fajir} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  
  // Time Search Component
  
  import React, {Component} from 'react';
  
  class TimeSearch extends Component {
    render() {
      return (
        &lt;ul&gt;
          &lt;form onSubmit={e =&gt; this.handleFormSubmit(e)}&gt;
            &lt;input type="text" id="lookUp" placeholder="Search by City" ref="seachBox" /&gt;
            &lt;button type="submit" id="searchButtons"&gt;
              {' '}
              Search{' '}
            &lt;/button&gt;
          &lt;/form&gt;{' '}
        &lt;/ul&gt;
      );
    }
    handleFormSubmit(e) {
      e.preventDefault();
      var item = this.refs.searchBox.value;
      this.props.handleFormSubmit(item);
    }
  }
  
  export default TimeSearch;
  
  // Current Time Component
  
  import React, {Component} from 'react';
  
  class CurrentTime extends Component {
    render() {
      return (
        &lt;div id="time"&gt;
          &lt;h1 id="fajir"&gt; {this.props.Fajir} &lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default CurrentTime;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update</strong>
  <a href="https://i.stack.imgur.com/YJx9T.png" rel="nofollow noreferrer">https://i.stack.imgur.com/YJx9T.png</a></p>
  
  <p>Nothing shows up when I log the which is confusing me and I tried making an API request using Postman windows application and it works 100% fine so I have no clue what is going on now</p>