React : list.map is not a function with array

Question

I'm fetching data using axios as the following :

{
    "data": {
        "3": {
            "id": 4,
            "value": "FaAlgolia",
            "name": "zaefzaef",
            "profile_id": 4,
            "order": 9000,
            "created_at": "2021-05-17T20:25:03.000000Z",
            "updated_at": "2021-05-17T20:25:03.000000Z",
            "url": "katon",
            "profile": {
                "id": 4,
                "username": "xxxxxxxxx",
                "bio": "zfzefzef",
                "preview": "ssss",
                "address": "zefzef",
                "country": "us",
                "p_color": "#ffffff",
                "s_color": null,
                "logo": "afffable",
                "showlogo": "null",
                "selectedOption": "option2",
                "url": "katon",
                "user_id": 2,
                "created_at": null,
                "updated_at": "2021-05-17T20:28:08.000000Z"
            }
        },
        "4": {
            "id": 5,
            "value": "FaAlipay",
            "name": "azdadzzad",
            "profile_id": 4,
            "order": 9000,
            "created_at": "2021-05-17T20:41:53.000000Z",
            "updated_at": "2021-05-17T20:41:53.000000Z",
            "url": "katon",
            "profile": {
                "id": 4,
                "username": "xxxxxxxxx",
                "bio": "zfzefzef",
                "preview": "ssss",
                "address": "zefzef",
                "country": "us",
                "p_color": "#ffffff",
                "s_color": null,
                "logo": "afffable",
                "showlogo": "null",
                "selectedOption": "option2",
                "url": "katon",
                "user_id": 2,
                "created_at": null,
                "updated_at": "2021-05-17T20:28:08.000000Z"
            }
        }
    }
}

In React :

  const [list, setList] = React.useState([]); 

  useEffect(() => {
    axios
      .get("http://localhost:8000/api/social/profile/katon")
      .then((response) => {
       let test = (response.data.data)
        setList(test)
      })
      .catch((err) => console.log(err));
  }, []);

console.log of test

I know that I have a problem with the received array, I tried adding [] but none of that worked.

I searched React code throwing “TypeError: this.props.data.map is not a function” & React JS - Uncaught TypeError: this.props.data.map is not a function and didn't find my answer.

This is not an array, this is an object. Objects don't have a .map() method. — VLAZ
– VLAZ, Commented May 18, 2021 at 12:24
@VLAZ I tried putting [response.data.data] to get the array but didn't work. — AlyaKra
– AlyaKra, Commented May 18, 2021 at 12:26
if you only want the values of the data object and have no use of the keys (3,4) then you can use let test = Object.values(response.data.data); — Abdullah Razzaki
– Abdullah Razzaki, Commented May 18, 2021 at 12:27
@AbdullahRazzaki It worked ! Thank you very much. I was trying to put [response.data.data] and Array.from ... — AlyaKra
– AlyaKra, Commented May 18, 2021 at 12:29

Abdullah Razzaki · Accepted Answer · 2021-05-18 12:33:28Z

1

Your response.data.data is an object and objects don't have .map functions. You will need to convert it to an Array.

If you only want the values of the data object and have no use of the keys (3,4) then you can use

let test = Object.values(response.data.data);

answered May 18, 2021 at 12:33

Abdullah Razzaki

1,00210 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React : list.map is not a function with array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related