API data not printing but successes with console.log

[ni6348]

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;

[lasjorg]

It would help with a live example (CodeSandbox).

---

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

[ni6348]

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": [
{}
]
}

[ni6348]

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…

[lasjorg]

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.