Am I using map() wrong?? Image doesn't get displayed

Issue

Image doesn't get display on browser

I have this problem that I cannot display image by using map(), and this is making me go crazy. When I console.log, everything is fine I use a object with images[] property to store images. I can only display image when I remove map() and access individual image link directly: such as obj.images[0]

Code

//Gallery
interface createGalleryProps {
    obj: any
}

export const CreateGallery = ({ obj }: createGalleryProps) => {
  obj.images.map((image: any)=>{console.log("mapped link", image)}) 
  return (
    <>
      { obj.images.map((image: any, i: number) => {
        <li className="block absolute top-0">
          <div className="w-52 md:w-60 lg:w-72">
            <div className="flex justfy-center">
              <a href={obj.detail}>
                <img
                 className="object-cover object-center blockop-0 inset-0  rounded-[0.625rem]"
                 key={i}
                 src={image}
                />
              </a>
            </div>
          </div>
        </li>
      })}
    </>
)}

Solution

There are 2 things you could do to fix it. Either add a return statement to the map or use the shorthand and change the curly brackets to normal ones.

The reason why is that a .map() function needs to explicitly return something.

{
  obj.images.map((image: any, i: number) => {
    return (<li className="block absolute top-0">
     // Rest of your code here
    </li>);
  });
}

// or Shorthand
// Notice their is no return statement and the {} brackets have changed to ()

{
  obj.images.map((image: any, i: number) => (
    <li className="block absolute top-0">
       // Rest of your code here
    </li>;
  ));
}

Answered By - Richard Hpa