Displaying RapidAPI data nicely in a React app

Other Questions RapidAPI
1

I’m working on a project using Node, Express, and React. I’ve got an API from RapidAPI set up, but right now it’s just showing the raw JSON data. How can I take the info from my Node/Express server and make it look good on my React frontend?

Here’s what my backend.js looks like:

const EXPRESS_PORT = 3000
const expressApp = require('express')()
const corsMiddleware = require('cors')()
require('dotenv').config()
const axiosLib = require('axios').default

expressApp.use(corsMiddleware)

expressApp.get('/squad-info', async (req, res) => {
  const apiConfig = {
    method: 'GET',
    url: 'https://soccer-stats-api.example.com/v2/squad-statistics',
    params: {
      competition: '42',
      year: '2021',
      squad: '27'
    },
    headers: {
      'API-Key': process.env.SOCCER_API_KEY,
      'API-Host': 'soccer-stats-api.example.com'
    }
  }
  
  try {
    const apiResponse = await axiosLib.request(apiConfig)
    console.log(apiResponse.data)
    res.json(apiResponse.data)
  } catch (err) {
    console.error(err)
  }
})

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

And my FrontendComponent.js is pretty empty right now:

import React from 'react'

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

export default FrontendComponent

Any tips on how to make the data look nice in React would be super helpful!

2

Having worked with RapidAPI and React, I can share some insights. To display the data nicely, you’ll want to structure your React component to handle state and side effects properly. Here’s a basic approach:

First, use useState to manage your data state. Second, implement useEffect to fetch data when the component mounts. Third, create a loading state to handle the async nature of API calls. Fourth, break down the data into smaller, reusable components for better organization.

For example:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function FrontendComponent() {
  const [squadData, setSquadData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('/squad-info')
      .then(response => {
        setSquadData(response.data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (!squadData) return <div>No data available</div>;

  return (
    <div>
      <h1>{squadData.teamName}</h1>
      {/* Add more components here to display different aspects of the data */}
    </div>
  );
}

export default FrontendComponent;

This structure provides a solid foundation for displaying your API data in a React-friendly way.

3

hey, i’ve dealt with this before. you could try using react-table for displaying the data nicely. it’s pretty easy to set up and customize. just install it, import it, and create columns based on your api response. then pass the data to the Table component. it’ll give you sorting and filtering out of the box. good luck!

4

I’ve been in a similar situation, and here’s what worked for me:

First, fetch the data from your backend in your React component using useEffect and useState hooks. Then, create separate components for different parts of the squad info (e.g., PlayerCard, TeamStats).

In your FrontendComponent, you could do something like:

const [squadData, setSquadData] = useState(null);

useEffect(() => {
  fetch('/squad-info')
    .then(res => res.json())
    .then(data => setSquadData(data))
    .catch(err => console.error('Error fetching data:', err));
}, []);

if (!squadData) return <div>Loading...</div>;

return (
  <div>
    <h1>{squadData.teamName}</h1>
    <TeamStats stats={squadData.teamStats} />
    {squadData.players.map(player => (
      <PlayerCard key={player.id} player={player} />
    ))}
  </div>
);

This approach lets you break down the data into manageable pieces and style each component individually. It’s much easier to make it look good this way, and it keeps your code organized.