Why's only the first value showing up in .map when trying to display contents of GET request?

Question

I've tried everything I possibly could but for some reason, only the first index in the array ([{...}, {...}, {...}]) is being displayed on the browser - the other two indices are being ignored. I've searched this problem up on SO and found some similar issues people were facing but none of their solutions worked for me.

What am I doing wrong? How can I make it so that all contents in the array are being shown on the browser?

Here's my code:

import React, {useEffect, useState} from "react";
import '../../../sass/prizes/prizes.scss';

const Prizes = () => {

    const [prizeData, setPrizeData] = useState([]);                       

    useEffect(() => {
        axios.get('http://localhost/api/prizes')
            .then(resp => {
                setPrizeData([resp]);
                console.log(prizeData)
            }).catch(error => {
            console.log(error);
        });
    }, []);

    return (
        <div className="main">
            <h1>Prizes</h1>
            <ul className="cards">
                <li className="cards_item">
                    <div className="card">
                        {
                            prizeData.map((prizes, index) => {
                                return(
                                    <>
                                        <div className="card_image"><img src={prizes.data[index].image_url} className="giftCards"/></div>
                                        <div className="card_content">
                                            <h2 className="card_title">{prizes.data[index].prizeName}</h2>
                                        </div>
                                    </>
                                );

                            })
                        }
                    </div>
                </li>
            </ul>
        </div>

    );
};

export default Prizes;

screenshot of logging the response

`setPrizeData([resp]);` typo, you're setting the state to an array with only one item... if you wanted to set the new state to the whole response, pass in only `resp` instead of with an array around it — CertainPerformance, Apr 18 '22 at 18:10
@CertainPerformance I've tried that but I get this error `prizeData.map is not a function`. Even if I set `setPrizeData` to `null` in the hook (`useState(null)`), I get an error. — luvs2spooge, Apr 18 '22 at 18:13
Clearly `resp` isn't an array. What does the API data look like? — James, Apr 18 '22 at 18:22

score -1 · Answer 1 · answered Apr 18 '22 at 18:19

-1

CertainPerformance is right, it should be setPrizeData(resp). If you get prizeData.map is not a function then maybe there's something wrong with the response (resp).

Is resp just an array? Can you print the state to see what's stored in it?

answered Apr 18 '22 at 18:19

Bender

13
1
6

I've added a screenshot to my original post – luvs2spooge Apr 18 '22 at 18:22
hmmm I see. Ok, keep the setState as setPrizeData(resp) and change the mapping to prizeData[0].map – Bender Apr 18 '22 at 18:27

Charles Owen · Answer 2 · 2022-04-18T19:06:16.570

You're basically using a prop as an array when you do this:

setPrizeData([resp])

This is why you only get a single index because you are using it as an array.

Instead do this:

setPrizeData(resp);

The error you're getting:

prizeData.map is not a function

The API is probably returning an object. Do a CURL request or something to see what your response looks like.

If you can confirm you're actually getting data, try something like this in your Axios get:

.then(response => {
   setPrizeData(response.data);          
})
.catch(error => console.log(error));

Additionally, here is a template you can use:

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

export default function App() {
   const [data, setData] = useState([]);
   const getData = async () => {
      const { data } = await axios.get(<yourapi endpoint>);
      setData(data);
   };

   useEffect(() => {
   getData();
 }, []);

  return <div>{JSON.stringify(data)}</div>;
}

Why's only the first value showing up in .map when trying to display contents of GET request?

2 Answers2