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

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

CodePudding user response：

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>;
}

CodePudding user response：

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?