Typeerror: Trips.map is not a Function

Question

I am having trouble reading a JSON with React.js. I get the following error:

TypeError: trips.map is not a function

src>pages>Home>index.js

import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import api from '../../services/api';
import {Link} from 'react-router-dom';
import './style.css';

export default function Home() {   


  //Criamos uma state para armazenar tudo o que receber da api
  const [trips, setTrips] = useState([]);

  useEffect(()=>{

    //Carregamos a api
    async function loadApi(){

        //Acessando a rota /pets
        const response = await api.get('pets');
        //Recebendo os dados
      setTrips(response.data);

      //log
      console.log(response.data);      
    }

    //Chamando a função
    loadApi();

  }, []);



  return (

    <div className="container-geral">           
      <div className="row">     
        {trips.map(trip => (
          <span className="nome-pet">{trip.nome_pet}</span>
        ))}
      </div>
    </div>        

  );
}

My json I got from the console.

{current_page: 1, data: Array(5), first_page_url: "http://localhost:8080/projeto-pet/api/public/api/v1/pets?page=1", from: 1, last_page: 1, …}
current_page: 1
data: Array(5)
0: {id: 3, nome_pet: "Kabum editado dois", descricao_pet: "Ele é branco e de raça pit bull. Estava com uma coleira preta.", id_users: 1, id_categoria: 1, …}
1: {id: 4, nome_pet: "Carlitos", descricao_pet: "Ele é branco e de raça pit bull. Estava com uma coleira preta.", id_users: 1, id_categoria: 1, …}
2: {id: 5, nome_pet: "Jubão", descricao_pet: "Ele é branco e de raça pit bull. Estava com uma coleira preta.", id_users: 1, id_categoria: 1, …}
3: {id: 6, nome_pet: "Tonho", descricao_pet: "Ele é branco e de raça pit bull. Estava com uma coleira preta.", id_users: 1, id_categoria: 1, …}
4: {id: 7, nome_pet: "Chico", descricao_pet: "Ele é branco e de raça pit bull. Estava com uma coleira preta.", id_users: 1, id_categoria: 1, …}
length: 5
__proto__: Array(0)
first_page_url: "http://localhost:8080/projeto-pet/api/public/api/v1/pets?page=1"
from: 1
last_page: 1
last_page_url: "http://localhost:8080/projeto-pet/api/public/api/v1/pets?page=1"
next_page_url: null
path: "http://localhost:8080/projeto-pet/api/public/api/v1/pets"
per_page: "10"
prev_page_url: null
to: 5
total: 5
__proto__: Object

Answer 1

The .map() is a method of Arrays, not Objects. Your response.data is an object, as shown by console.log().

If you want to get the Array with 5 objects containing id, nome_pet, descricao_pet etc. you must access the property data:

// Veja a diferença entre os logs.
console.log(response.data);
console.log(response.data.data);
setTrips(response.data.data);