Typeerror: Contacts.map is not a Function

Question

Hello, I searched on the subject and saw that it may be an error that may be due to not receiving an array. However, I put to be returned an array in the API, can be consulted here https://agendaapplp3.herokuapp.com/contatos

only that in the part of React appears this error, "TypeError: contacts.map is not a function". follows the code:

   const ListContacts: React.FC = () => {
  
   const [contacts, setContacts] = useState <ContactsProps[]>([]);

   async function getContacts(){
       const response = await api.get<ContactsProps[]>("/contatos");
      setContacts(response.data);
   }
   useEffect(()=>{
       getContacts();
   },[]);

the error is in this part below.

{contacts.map((contact)=>(
                                <tr>
                                    <td>{contact.id}</td>
                                    <td>{contact.nome}</td>
                                    <td>{contact.email}</td>
                                    <td>{contact.telefone}</td>
                                    <td>{contact.idlocal}</td>
                                    <td>{contact.idtipocontato}</td>
                                </tr>

to connect the api, I used Axios

    import axios from "axios";

    const api = axios.create({
     baseURL:"https://agendaapplp3.herokuapp.com"
    })

    export default api;

I’m new to React, which may be?

Answer 1

I solved your problem, I think, by putting a interface to the Response, and in the setContacts we put response.data.results. In this way:

interface ContactsProps {
  id: number;
  nome: string;
  email: string;
  telefone: string;
  idlocal: number;
  idtipocontato: number;
}

interface Response { // Uma interface para o Response.
  data: {
    results: [];
  };
}

const api = axios.create({
  baseURL: 'https://agendaapplp3.herokuapp.com',
});

const ListContacts: React.FC = () => {
  const [contacts, setContacts] = useState<ContactsProps[]>([]);

  async function getContacts() {
    const response: Response = await api.get('/contatos'); // informamos ao TS que a resposta tera o formado do Response.

    setContacts(response.data.results); // set dos arrays para o contacts
  }
  useEffect(() => {
    getContacts();
  }, []);

  return (
    <>
     <table>
      {contacts &&
        contacts.map((contact: ContactsProps) => (
          <tr key={Math.random()}>
            <td>{contact.id}</td>
            <td>{contact.nome}</td>
            <td>{contact.email}</td>
            <td>{contact.telefone}</td>
            <td>{contact.idlocal}</td>
            <td>{contact.idtipocontato}</td>
          </tr>
        ))}
     </table>
    </>
  );
};

export default ListContacts;

Try the tests. I hope I’ve helped.