API data not printing but successes with console.log

0

I’m trying to learn about APIs and trying to code a REACT app to go along with it. I am sure the issue is a minor one, but I can’t seem to crack it.

The relevant code is pasted below, the API is fetched in index.js.

The contents of the API is printed to the console without issue but I can not seem to get it right when going through my list and event details.

I am new to coding so I would appreciate any feedback given.

App.js

import React, { useState, useEffect } from "react";
import { CssBaseline, Grid } from "@material-ui/core";

import { getEventsData } from "./api";

import Header from "./components/Header/Header";
import List from "./components/List/List";
import EventDetails from "./components/EventDetails/EventDetails";

const App = () => {
    const [events, setEvents] = useState([]);


    useEffect(() => {
        getEventsData()
            .then((data) => {
                console.log(data);
                console.log(Array.isArray(data))
                setEvents(data);
            })
    }, []);

    return (
        <>
            <CssBaseline />
            <Header />
            <List EventDetails={EventDetails} />
        </>
    )
}

export default App;

index.js

import axios from "axios";

const URL = 'https://api-football-v1.p.rapidapi.com/v3/fixtures'


const options = {
  params: {date: '2022-02-12', league: '39', season: '2021'},
  headers: {
    'x-rapidapi-host': 'api-football-v1.p.rapidapi.com',
    'x-rapidapi-key': 'xxxxxxxxxxxx'
  }
};



export const getEventsData = async () => {
    try {
        const { data } = await axios.get(URL, options);
        // Kan det ha något med options att göra? https://stackoverflow.com/questions/68367352/multiple-url-variable-async-await-axios
        return data;
  } catch (error) {
        
  }
};

List.jsx

import React, { useState } from "react";
import { CircularProgress, Grid, Typography, InputLabel, MenuItem, FormControl, Select, ButtonGroup, Button } from "@material-ui/core";

import EventDetails from "../EventDetails/EventDetails"

import useStyles from "./styles"

const List = ({ events }) => {
    const classes = useStyles();
    const [type, setType] = useState("premierleague");

    return (
        <div className={classes.container}>

            <FormControl className={classes.formControl}>
                <InputLabel>Sport</InputLabel>
                <Select value={type} onChange={(e) => setType(e.target.value)}>
                    <MenuItem value="premierleague">Premier League</MenuItem>
                    <MenuItem value="formula1">Formula 1</MenuItem>
                </Select>
                {/*<ButtonGroup value={type} onClick={(e) => setType(e.target.value)}>
                    <Button value="premierleague">Premier League</Button>
                    <Button value="formula1">Formula 1</Button>
                </ButtonGroup>*/}
            </FormControl>

              
            <Grid container spacing={3} className={classes.list}>
                {events?.map((event, i) => (
                    <Grid item key={i} xs={12}>
                        <EventDetails event={event} />
                    </Grid>
                ))}
            </Grid>    
            
        </div>
    )
}

export default List;

EventDetails.jsx

import React from "react";

const EventDetails = ({ event }) => {
    console.log(event)

    return (
        <h3>{event.league}</h3>
    )
}

export default EventDetails;

It would help with a live example (CodeSandbox).


Shouldn’t the prop in List.jsx be EventDetails?

Thank you for the response, I have cleaned up my code and think I found an issue,

This part returns the error,

Uncaught (in promise) TypeError: events.map is not a function

<Grid container spacing={3} className={classes.list}> {events?.map((event, i) => ( <Grid item key={i} xs={12}> <EventDetails event={event} /> </Grid> ))} </Grid>

This makes me believe that the data I am getting back from the api is not an array.

This is the data I get back,

{
"get": "fixtures",
"parameters": {
"live": "all"
},
"errors": [ ],
"results": 4,
"paging": {
"current": 1,
"total": 1
},
"response": [
{}
]
}

I guess my real question now is how I access the array coming from response within my code? Sorry if this is a stupid question but I really am stuck…

Did you look at what I hinted at?


  1. Not sure why you are importing the EventDetails component in App.js as you are not using it.

  2. You set events inside App.js but pass EventDetails as a prop.

  3. The prop name used on the List component inside App.js is EventDetails but you use it as events inside the component.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.