Displaying RapidAPI response data in React components

Other Questions RapidAPI
1

I’m working on a web application that uses Express for the backend and React for the frontend. My goal is to retrieve data from a RapidAPI endpoint and display it correctly in my React components, rather than just showing the raw JSON data.

Currently, my Express server is successfully obtaining the API data, but I’m unsure of how to utilize this data in my React frontend and present it properly within HTML elements.

Backend code (app.js):

const express = require('express')
const cors = require('cors')
const axios = require('axios')
require('dotenv').config()

const server = express()
const PORT = 3001

server.use(cors())

server.get('/players', async (req, res) => {
    const config = {
        method: 'GET',
        url: 'https://api-football-v1.p.rapidapi.com/v3/players/topscorers',
        params: {
          league: '140',
          season: '2023'
        },
        headers: {
          'X-RapidAPI-Key': process.env.API_KEY,
          'X-RapidAPI-Host': 'api-football-v1.p.rapidapi.com'
        }
    };
    
    try {
        const result = await axios.request(config);
        console.log(result.data);
        res.json(result.data)
    } catch (err) {
        console.error(err);
    }
})

server.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`)
})

Frontend code (Main.js):

import React from 'react'

function Main() {
  return (
    <div>
      {/* Need help displaying API data here */}
    </div>
  )
}

export default Main

What is the best way for me to fetch data from my Express endpoint and display it properly in React components?

2

I’ve done similar API integrations before. Set up error boundaries with your data fetching - you’ll need them. Once you’ve got the basic fetch working with useState and useEffect, focus on the data structure your football API returns. Most RapidAPI responses wrap everything in a response property, so you’ll probably need data.response instead of just data. For the player display, map through the array and grab player.name, player.photo, and statistics[0].goals.total. Don’t forget the dependency array in useEffect or you’ll get infinite re-renders. Add a cleanup function to cancel requests if the component unmounts. And definitely handle network errors - external APIs fail all the time.

3

use axios in ur React component - it’s cleaner than fetch. add a loading spinner while data loads since users hate blank screens. make sure ur backend runs on port 3001 before testing the frontend or u’ll hit CORS errors.

4

In my experience, utilizing the useEffect and useState hooks in React for data fetching from an Express backend is effective. Start by creating a state variable to hold the player data, for example, const [players, setPlayers] = useState([]). Inside useEffect, make a call to your Express endpoint using fetch('http://localhost:3001/players'). Once you get the response, update your state with setPlayers(data) where data is the parsed JSON response. Ensure to implement a loading state to inform users while the data is being fetched, and handle potential errors gracefully. Also, always inspect the API documentation for the appropriate data structure; sometimes the desired data is nested under a response key.