I successfully retrieved data from an API using axios and stored it in the state of my React component. However, I am struggling to display this data on the web so that I can list all the information obtained from the API request. I have tried using the map function, but I keep encountering errors or nothing is being displayed.
Below you will find my code snippet along with the data fetched from the server:
import axios from "axios"
import React, { useState, useEffect } from "react"
function AdministrationPanel() {
const [inqueries, getInqueries] = useState<any[]>([])
const token ="**************************************************"
const url = "https://strapi-km.herokuapp.com/api/inquiries?populate=*"
useEffect(() => {
axios
.get(url, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((response) => {
const inquiriesData = response.data
console.log(inquiriesData)
getInqueries(inquiriesData)
})
}, [])
console.log(inqueries)
return (
<>
<div>
{this.state.inqueries.map(({ name }: any) => {
return <p>{name}</p>
})}
</div>
</>
)
}
export default AdministrationPanel
Console screenshot of data response
Screenshot of application state data
Despite trying various solutions found online, I am still unable to resolve this issue as a newcomer to programming.