Displaying RapidAPI response data in React components

Other Questions RapidAPI
1

I’m working on a full-stack application using Express.js for the backend and React for the frontend. I need to consume data from a RapidAPI service but I’m having trouble displaying it properly in my React components. Right now the API response just shows as raw JSON data.

I have my Express server set up to fetch data from the API, but I’m not sure how to properly send this data to my React frontend and render it in a user-friendly way. What’s the best approach to handle this data flow?

Backend server code:

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

const app = express()
const PORT = 5000

app.use(cors())

app.get('/stats', async (req, res) => {
    const config = {
        method: 'GET',
        url: 'https://api-football-v1.p.rapidapi.com/v3/teams/statistics',
        params: {
          league: '140',
          season: '2023',
          team: '42'
        },
        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)
    }
})

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

React component:

import React from 'react'

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

export default App
2

You’re missing the actual fetch logic in your React component. You need to set up useState to manage your component state and useEffect for the API call. Try const [teamStats, setTeamStats] = useState(null) then fetch from your localhost:5000/stats endpoint. The RapidAPI football data structure is pretty deep, so console.log the response first to see what you’re working with. Once you’ve got the data, break it into smaller components for different stat categories instead of rendering everything in one place. Makes the code way more maintainable and the UI cleaner.

3

use useEffect to fetch data. set up useState to store your stats, and then call your express endpoint in useEffect. try fetch(‘/stats’).then(res => res.json()).then(data => setYourState(data)). this should work!

4

Your main problem is data handling on the frontend. After you fetch from your Express endpoint, destructure the response to get the actual team stats. RapidAPI football responses are nested, so you’ll need to drill down - like data.response.fixtures.played.home for team performance data. Once you’ve got the data in state, split it into separate components for Goals, Fixtures, Cards, etc. Don’t forget loading states and error handling since API calls fail. Also throw some basic CSS on there - cards or tables make raw numbers way more readable than just dumping them on the page.