0

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>
      })}
    </>
)}
Fiehra
  • 659
  • 6
  • 23
kawa
  • 207
  • 1
  • 7
  • 3
    Missing a `return`. If you don't return anything inside the `map` nothing will get displayed. – kelsny Aug 29 '22 at 20:14
  • Can you explain more? My code has a return keyword, where else do I need it? @kelly – kawa Aug 29 '22 at 20:17

2 Answers2

2

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>;
  ));
}
Richard Hpa
  • 2,353
  • 14
  • 23
0
> "{}" <-- this opens the function, if you wish to return the jsx directly use () it's like a direct 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>
            )
Franco Garancini
  • 1