Working with promises in a React class component

Question

I have this module to fetch data using the Spotify API:

const Spotify = {
  getAccessToken() { ... },

  searchTrack(searchTerm) {
    const accessToken = Spotify.getAccessToken();

    return fetch(
      `https://api.spotify.com/v1/search?q=${searchTerm}&type=track`,
      {
        headers: { Authorization: `Bearer ${accessToken}` },
      }
    )
      .then((response) => response.json())
      .then((jsonResponse) => jsonResponse.tracks.items[3].name);
  },
};

I then import it to this class component and try to display the data:

  termToSearch() {
     return(Spotify.searchTrack(this.props.searchTerm))

}

But I keep getting this error:

Uncaught Error: Objects are not valid as a React child (found: [object Promise])... 

Also, when I alternately try to set the state in the function, I get an infinite loop of calls to the fetch API. I'm now really stuck on how to render this returned data.

Answer 1

If I understood correctly, you are trying to return the response getting from the fetch API call. Fetch will always return a promise and that is the reason you are getting Uncaught Error: Objects are not valid as a React child (found: [object Promise])...

You can use async and await to the function so that the promise will be resolved and return the result.

async function fetchAPI() {
        try {
            const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
            const result = await response.json();
            return result;
        } catch (error) {
            console.error(error);
        }
    }

async function api() {
        const result = await fetchAPI();
        console.log(result);
}

api();

I think you can change your method to something like this.

async searchTrack(searchTerm) {
    let res; 
    const accessToken = Spotify.getAccessToken();
    const data = await fetch(`https://api.spotify.com/v1/search?q=${searchTerm}&type=track`, {
        headers: { Authorization: `Bearer ${accessToken}` }
    });
    const jsonResponse = await data.json();
    return jsonResponse.tracks.items[3].name;
}

When you are calling the method you need to add await

async termToSearch() {
     return(await Spotify.searchTrack(this.props.searchTerm))