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, May 18 '21 at 12:24
@VLAZ I tried putting `[response.data.data]` to get the array but didn't work. — AlyaKra, May 18 '21 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, May 18 '21 at 12:27
@AbdullahRazzaki It worked ! Thank you very much. I was trying to put `[response.data.data]` and `Array.from` ... — AlyaKra, May 18 '21 at 12:29

score 1 · Accepted Answer · answered May 18 '21 at 12:33

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

React : list.map is not a function with array

1 Answers1