Having trouble retrieving image from API in Next.js - Error: Unable to access properties of undefined while trying to read 'map' in Next.js

Question

Having trouble retrieving image from API in Next.js - Error: Unable to access properties of undefined while trying to read 'map' in Next.js

I'm facing an issue with fetching an image from the API and I can't figure out what's causing it. Can anyone help me identify the problem?

On top of that, there's an error showing up in the browser indicating that the "src" property is missing when using the next/image component. The error message says: {} null

When I try to log the images in the console using console.log, it returns undefined.

function Images({images}) {
 
    
    return (
        <div>
    {images?.map((image)=> (
        <Image src={image.url}/>
    ))}    
        </div>
    )
}

export async function getStaticProps() {
    const res= await fetch ('https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG')
    const images = await res.json()

return {
    props: {
        images,
    },
}

}

export default Images

next.js fetch-api nextjs-image

Answer 1

Answer №1

You're dealing with a nested structure and the solution involves using nested maps.

function Images({ data }) {
  return (
    <div>
      {data?.length && 
        data.map((item) => item.images.map((image) => <img src={image?.url || ''} height={100} width={100} />))}
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default Images;

An additional tip:

If you encounter issues with next/image, make sure to include the necessary configuration in the next.config.js file as shown below:

module.exports = {
  ...otherConfigs,
  images: {
    domains: ['www.HOSTNAME.com'], // hostname of the img url
  },
};

The provided link showcases the images: https://i.stack.imgur.com/bU78c.png

Answer 2

You're dealing with a nested structure and the solution involves using nested maps.

function Images({ data }) {
  return (
    <div>
      {data?.length && 
        data.map((item) => item.images.map((image) => <img src={image?.url || ''} height={100} width={100} />))}
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default Images;

An additional tip:

If you encounter issues with next/image, make sure to include the necessary configuration in the next.config.js file as shown below:

module.exports = {
  ...otherConfigs,
  images: {
    domains: ['www.HOSTNAME.com'], // hostname of the img url
  },
};

The provided link showcases the images: https://i.stack.imgur.com/bU78c.png

Answer 3

Answer №2

Ensure that the variable images is an array.

If not, assign it a default value.

// getStaticProps
return {
    props: {
        images : images ?? [],
    },
}

or

function Images({ images = [] }) {...}

Answer 4

Ensure that the variable images is an array.

If not, assign it a default value.

// getStaticProps
return {
    props: {
        images : images ?? [],
    },
}

or

function Images({ images = [] }) {...}

Answer 5

Answer №3

{data?.image_url?.length && data?.image_url?.map((item: any) => (<img src={item.url || 'image'} height={300} width={400} />))}

Answer 6

{data?.image_url?.length && data?.image_url?.map((item: any) => (<img src={item.url || 'image'} height={300} width={400} />))}

Having trouble retrieving image from API in Next.js - Error: Unable to access properties of undefined while trying to read 'map' in Next.js

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to incorporate a next.js image onto the background design?

Error: Missing module/critical dependency required for mongoose/mongodb usage

Learn how to pass an id from the query parameters to the getInitialProps function in Next.js

AWS ECS + Fargate setup causing issues with Next.js CSR and GraphQL requests

`fetch` functionality does not function properly when included in middleware page after deployment on Vercel

Facing issues with dynamic imports in Jest and React Testing Library while testing Next.js 12? Try using SWC instead of babel for a smoother experience

Utilizing the Laravel back-end API within the getServerSideProps() function in Next.js

What is the best way to incorporate dynamically added scripts into a document using JavaScript

What is the process for accessing and interpreting request body and query parameters in the next 13 API using the app router in the route.ts file?

Refreshing a Next JS page with updated data from MongoDB database without needing a manual page reload

The next script functions are not compatible with the _document.js file in Next.js

Is implementing client components in Server Side pages an effective strategy for optimizing SSR performance?

Tips on implementing local storage in cypress

Deploy the Next.js app on Vercel without regenerating pages, and instead trigger the deployment only upon request

An issue with displaying images has been identified within Next.js, resulting in an error message related to the hostname

I noticed that when using Next.js with the `revalidate: 1` option on a static page, it is triggering two full F5 refresh actions instead of just one. I was hoping for

Securely verifying user identity across various domains using Cross-Origin Resource Sharing (CORS) in conjunction

An error occurred while trying to serialize the `.res` response received from the `getServerSideProps` function in

Issues with Paypal react and Next JS buttons failing to reflect changes in shopping cart quantities

Get image data from Next.JS API and show it in the web browser