Iterate through promise object in react component

How can I iterate through the promise object I have returned from my API call.

const [productData, setProductData] = useState(null)
useEffect(() => {
    getProductdata()
}, [])

async function getProductdata(){
    const secret = "SECRET"
    const request = await fetch(`https://app.myapi.com/api/products/id`, {
        headers: {
            'Authorization': `Basic ${btoa(secret)}`,
            'Accept': 'application/json'
        }
    }).then((request)=>{setProductData(request.json())})
    }
    
   console.log("pdata",productData)

enter image description here

Answer

If you’re using Promise with then then you should do as:

function getProductdata() {
  const secret = "SECRET";
  fetch(`https://app.myapi.com/api/products/id`, {
    headers: {
      Authorization: `Basic ${btoa(secret)}`,
      Accept: "application/json",
    },
  })
  .then((res) => res.json())
  .then(data => setProductData(data);
}

console.log("pdata", productData);