I'm working with reactjs trying to get and list the incidents in my page. According to console.log(incidents), incidents is a empty array, but when I run it the return is:
TypeError: incidents.map is not a function
export default function Profile() {
const ongName = localStorage.getItem("ongName");
const ongID = localStorage.getItem("ongID");
const history = useHistory();
const [incidents, setIncidents] = useState([]);
useEffect(() => {
async function a() {
api.get('profile', {
headers: {
Authorization: ongID,
},
}).then((response) => {
console.log(response.data)
setIncidents(response.data);
});
}
a();
}, [ongID]);
return (
<div className="profile-container">
<ul>
{console.log(incidents),
incidents.map(incident => (
<li key={incident.id}>
<strong>Caso:</strong>
<p>{incident.titulo}</p>
</li>
))}
</ul>
</div>
);
}
index.js:67 []length: 0__proto__: Array(0)
index.js:67 []length: 0__proto__: Array(0)
index.js:22 {incidents: Array(2)}incidents: Array(2)0: {id: 7, titulo: "csa", desc: "dsadsa", valor: "dsa", ong_id: "857bc663"}1: {id: 8, titulo: "asf", desc: "sdf", valor: "d", ong_id: "857bc663"}length: 2__proto__: Array(0)__proto__: Object
index.js:67 {incidents: Array(2)}
index.js:67 {incidents: Array(2)}
Your log seems to indicate that response.data is an object with the incidents array as a property.
Can you try replacing :
setIncidents(response.data);
with:
setIncidents(response.data.incidents);