React API call error, resulting in blank screen-CodePudding

I am new to programming and trying to build sample projects. could someone please help point me in the right direction on how to solve this issues of blank screen please?

Initially I had this

import CardApi from "./CardApi"

const ListApi = ({response, loading}) => {
  
     
    return (
        <div className="mx-2 mb-10">
            <h3 className="font-semibold text-xl text-slate-600">List API</h3>
            <div className="grid gap-4 md:grid-cols-3">
                {response && response.entries.map((api, index) =>  <CardApi />)}
    
            </div>
            </div>
      )
    }
    
    export default ListApi```

//but got console error: Uncaught TypeError: Cannot read properties of undefined (reading 'map')

//So read on some answers on here and updated to



`import CardApi from "./CardApi"

const ListApi = ({response, loading}) => {
  

  return (
    <div className="mx-2 mb-10">
        <h3 className="font-semibold text-xl text-slate-600">List API</h3>
        <div className="grid gap-4 md:grid-cols-3">
            {response && response.entries ?
            response.map((api, index) =>  (
            <CardApi /> 
            )) : null}

        </div>
        </div>
  )
}

export default ListApi
`

This time it flashes the data and api placeholder but still goes blank after a second Error: response.map is not a function.

Any help will be appreciated, thanks

CodePudding user response：

response.entries should be an array

{response && response.entries && response.entries.length>0 && response.map((api, index) =>  <CardApi />)}

CodePudding user response：

Looks like you were trying to map over response.entries but your updated code is attempting to map over the response object.

{response && response.entries ?
        response.map((api, index) =>  (
        <CardApi /> 
        )) : null}

should be

{response && response.entries ?
        response.entries.map((api, index) =>  (
        <CardApi /> 
        )) : null}

according to your original post