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

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) => {
    console.log(obj) //this consoles object
    console.log(obj.images) //this consoles images array
    obj.images.map((image: any)=>{console.log("mapped link", image)}) //console logs each image link
    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>;
  ));
}