Question

158

Fetch in React.js not working

rated 0 times [ 165] [ 7] / answers: 1 / hits: 19753 / 7 Years ago, thu, december 14, 2017, 12:00:00

I am trying to do a fetch 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.

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 + '&country=US&method=2';



    fetch(url)

      .then(response => {

        return response.json();

      })

      .then(json => {

        this.setState({

          Fajir: json.Fajir,

          Sunrise: json.Sunrise,

          Dhuhr: json.Dhuhr

        });

      });

  }



  render() {

    return (

      <div className=App>

        <h1>Welcome to Prayer Times!</h1>

        <h6>Search for times in any city in the United States</h6>

        <TimeSearch

          handleFormSubmit={item => {

            this.handleFormSubmit(item);

          }}

        />

        <CurrentTime Fajir={this.state.Fajir} />

      </div>

    );

  }

}



export default App;



// Time Search Component



import React, {Component} from 'react';



class TimeSearch extends Component {

  render() {

    return (

      <ul>

        <form onSubmit={e => this.handleFormSubmit(e)}>

          <input type=text id=lookUp placeholder=Search by City ref=seachBox />

          <button type=submit id=searchButtons>

            {' '}

            Search{' '}

          </button>

        </form>{' '}

      </ul>

    );

  }

  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 (

      <div id=time>

        <h1 id=fajir> {this.props.Fajir} </h1>

      </div>

    );

  }

}



export default CurrentTime;

Update
https://i.stack.imgur.com/YJx9T.png

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaden

Add To Favorites

Follow

Total Points: 709

Total Questions: 91

Total Answers: 91

Location: Maldives

Member since Sat, Jan 29, 2022

2 Years ago

answered 7 Years ago leslijessalyng · Accepted Answer

I think your fetch code looks ok, are any errors being thrown in the console? It might be your handler not being bound to the correct context. If you don't bind the function correctly, the this.setState will cause an error because this is not the correct context. You might want to bind it in the constructor, or even better, use an initializer like this:

handleFormSubmit = (item) => {

  const url = `https://api.aladhan.com/timingsByCity?city=${item}&country=US&method=2`;



  fetch(url)

    .then((response) => {

     return response.json();

    })

    .then((json) => {

      this.setState({

        Fajir: json.Fajir,

        Sunrise: json.Sunrise,

        Dhuhr: json.Dhuhr

      });

    });

}

One thing to do is check your browser's network developer tab and make sure the request is going through correctly.

Update

Looks like it's working now, see the fetch code below:

const item = 'Chicago';

    var url = 'https://api.aladhan.com/timingsByCity?city=' + item + '&country=US&method=2';



fetch(url)

  .then((response) => {

    return response.json();

  })

  .then((json) => {

    console.log(json);

  });