Deezer API - Objects are not valid as a React child (found: [object Promise])

Question

I've been trying to get data from Deezer API. However, I've encountered:

"Objects are not valid as a React child (found: [object Promise]"

and haven't figured out how to resolve this though I've tried many solutions. Any help would be much appreciated!

Solution 1:

import React, { useState, useEffect } from 'react';
import Layout from '../Layout.jsx';
import Playlists from '../components/others/Playlists';
import TrackListContainer from '../components/others/TrackListContainer';
import axios from 'axios';

const CORS_PROXY = 'https://api.allorigins.win/raw?url=';
const DEEZER_API_URL = 'https://api.deezer.com/';

const api = axios.create({
  baseURL: CORS_PROXY + DEEZER_API_URL,
  timeout: 15000,
});

function LibraryPage() {
  const [tracks, setTracks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await api.get('chart/0/tracks?limit=10');
        const data = response.data.data;
        setTracks(data || []);
      } catch (error) {
        console.error('Error fetching data:', err);
        setError(err);
        } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error fetching data</div>;
  }


  return (
    <div className='home-container'>
      {Array.isArray(tracks) && tracks.length > 0 ? (
        <TrackListContainer header='Trending right now' tracks={tracks} />
      ) : (
        <div>No tracks available.</div>
      )}
      <Playlists />
    </div>
  );
}

Solution 2:

 const fetchData = () => {
    api
      .get('chart/0/tracks?limit=10')
      .then((response) => {
        const data = response.data.data;
        setTracks(Array.isArray(data) ? data : []); 
      })
      .catch((err) => {
        console.error('Error fetching data:', err);
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  };

Solution 3:
class LibraryPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      tracks: [],
      loading: true,
      error: null,
    };
  }

  async componentDidMount() {
    try {
      const response = api.get('chart/0/tracks?limit=10');;
      const data = response.data.data; 

      console.log("this is the data", data);

      this.setState({ tracks: data, loading: false });
    } catch (error) {
      console.error('Error fetching data:', error);
      this.setState({ error, loading: false });
    }
  }

  render() {
    const { tracks, loading, error } = this.state;

    if (loading) {
      // Render a loading indicator
      return <div>Loading...</div>;
    }

    if (error) {
      // Handle the error as needed
      return <div>Error fetching data</div>;
    }

    return (
      <div className='home-container'>
        {Array.isArray(tracks) && tracks.length > 0 ? (
          <TrackListContainer header='Trending right now' tracks={tracks} />
        ) : (
          <div>No tracks available.</div>
        )}
        <Playlists />
      </div>
    );
  }
}

I got the correct response but still can't get rid of the [object Promise] error.It seems that the issue might be related to how the tracks state is being handled. Since the data fetching is asynchronous, there are times when tracks might contain a promise instead of an array of tracks, leading to the:

"Objects are not valid as a React child" error.

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Error:

Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

What's going on here?