Hi I am new at strapi and as I read there are main changes in strapi when I get api in postman it return an object which have a keys of ['data','meta']. How to get a attributes in strapi object using map in reactjs?. I try to find solution in strapi doc or video but didnt get the solution yet. There are more code example I already tried but I keep it simple so I only pick one. Thanks in advance
//USING JS FETCH FUNCTION
import {useEffect,useState} from 'react'
const FetchTest = () => {
const [detail,setDetail] = useState([])
const valueofdetail = Object.keys(detail) //CHECK KEYS IN DETAIL STATE
const detailedata = detail.data //USING KEY FOR ACCESS THE ARRAY OF DETAIL
console.log(valueofdetail) //LOG THE KEYS
console.log("detailedata is an array " + Array.isArray(detailedata)) // CHECK IF THE CONST ARRAY OR NOT
console.log(detailedata) // SHOW THE ARRAY
const newData = []
useEffect(() => {
fetch('http://localhost:1337/api/products',{
headers: {
Authorization:
'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiaWF0IjoxNjU0NTA5MDE1LCJleHAiOjE2NTcxMDEwMTV9.HOGhkG--nRYbPQKmOsNo75VAOKQydu1kw8o8MncdhdE',
},
})
.then((response) => response.json())
.then((data) => setDetail(data))
.then(console.log("Data success"))
.catch((err) => {
console.log(err)
})
},[])
return (
//Try to iterate throught the object array using map
<div>
{
detailedata.map((product) => {
return <li>{product}</li>
})
}
<br></br>
<br></br>
<p>{JSON.stringify(detail)}</p>
</div>
);
}
export default FetchTest;
/**
// detail.map((item) => {return <li>{item}</li>})
// <p>{JSON.stringify(detailedata)}</p>
*/
**STRAPI POSTMAN GET FOR SINGLE ID **
{
"data": {
"id": 1,
"attributes": {
"title": "Xiaomi Headset Keren",
"price": 30000,
"city": "Surabaya",
"createdAt": "2022-06-06T08:27:57.310Z",
"updatedAt": "2022-06-07T10:37:50.517Z",
"publishedAt": "2022-06-06T08:40:23.113Z"
}
},
"meta": {}
}