CODEWITHSUNDEEP
reactjs
Carl
Carl

Reputation: 357

Why map() function doesn't work in my react app?

So I have a usual container which displays some products, and I get products data(like img, title) from the file called data.js, and map through it to display it.

It looks like this:

<div className="wrapper">
                {sliderItems.map((item)=>{
                    <div className="slide">
                    <div className="img_container">
                        <img src={item.img}/>
                    </div>
                    <div className="info_container">
                        <h1>{item.title}</h1>
                        <p>{item.desc}</p>
                        <button>Button</button>
                    </div>
                </div>
                })}
            </div>

And my data.js looks like this:

import beats from './assets/beats.png';
import headphone from './assets/headphone.png';
import girl from './assets/girl.png';

export const sliderItems = [
    {
      id: 1,
      img: beats,
      title: "SUMMER SALE",
      desc: "DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.",
      bg: "f5fafd",
    },
    {
      id: 2,
      img: headphone,
      title: "AUTUMN COLLECTION",
      desc: "DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.",
      bg: "fcf1ed",
    },
    {
      id: 3,
      img: girl,
      title: "LOUNGEWEAR LOVE",
      desc: "DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.",
      bg: "fbf0f4",
    },
  ];

But for some reason, it doesn't display in container, like it's totally empty on the page. I looked up in the browser code, and 'wrapper' div is just empty:

enter image description here

So I'm wondering what could be the reason that map function doesn't work.

Upvotes: 0

Views: 281

Answers (3)

Borni.Mr
Borni.Mr

Reputation: 679

you need to add return html in the map

<div className="wrapper">
                {sliderItems.map((item)=>{
                return(
                    <div className="slide">
                    <div className="img_container">
                        <img src={item.img}/>
                    </div>
                    <div className="info_container">
                        <h1>{item.title}</h1>
                        <p>{item.desc}</p>
                        <button>Button</button>
                    </div>
                </div> );
                })}
            </div>

Upvotes: 1

Michael
Michael

Reputation: 987

your not returning from the map() function. This should solve it:

             <div className="wrapper">
                    {sliderItems.map((item)=> ( <div className="slide">
                        <div className="img_container">
                            <img src={item.img}/>
                        </div>
                        <div className="info_container">
                            <h1>{item.title}</h1>
                            <p>{item.desc}</p>
                            <button>Button</button>
                        </div>
                    </div>)
                    )}
                </div>

Upvotes: 1

Georgy
Georgy

Reputation: 1939

It seems you didn't return your elements from map. Try this:

<div className="wrapper">
                {sliderItems.map((item)=>(
                    <div className="slide">
                    <div className="img_container">
                        <img src={item.img}/>
                    </div>
                    <div className="info_container">
                        <h1>{item.title}</h1>
                        <p>{item.desc}</p>
                        <button>Button</button>
                    </div>
                </div>
                ))}
            </div>

Upvotes: 1

Related Questions