React JS map data is not defined in axois

Question

Basically, I started working on sample axois API, In the console, the data is coming perfect, and once a compilation in command is done its not throwing any error, but in the browser, it showing `TypeError: data.map is not a function

Any Help will be appreciated !!`

 import React, { useState, useEffect } from "react"; import axios from "axios"; function Api() { const [data, setData] = useState([]); useEffect(() => { axios.get("https://reqres.in/api/users/").then((response) => { console.log(response); setData(response.data); }).catch((error) => { console.log(error); }); }); return ( <> <ul> {data.map((e) => ( <li key={e.id}>{e.email}</li> ))} </ul> </> ); } export default Api;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

have done so far

Answer 1

I think you have forgotten the dependecy array as the second parameter on useEffect.

useEffect(() => { axios.get("https://reqres.in/api/users/").then((response) => { console.log(response); setData(response.data); }).catch((error) => { console.log(error); }); }, []);