How Use images from javascript array in react using filter and map function

Question

I have a javascript array like this:

const IMGS = [{
    id: 0,
    path: "../img/a1.jpeg",
  },
  {
    id: 1,
    path: "../img/a1-01.jpeg",
  },
  {
    id: 2,
    path: "../img/a1-02.jpeg",
  },
  {
    id: 3,
    path: "../img/a1-03.jpeg",
  }
]
export default IMGS;

There are more images I am just showing few of them, I need to show all the images in react from this array. The condition is the image_id should be >=18 but <30. How can I achieve that? (I need to know the syntax).

I know I can do it using filter or map function, actually I'm new to javascript coming from c++, python background. It looks bit confusing to me. Please help! This is my react code where I'm rendering it

<React.Fragment>
      <Jumbotron>
          <img src={background} alt="Not loading"  id="jumbotron-image" className="img-fluid"/>
      </Jumbotron>
      <div className="container">
          <div className="row">
              <h1>Trending</h1>
          </div>
          <div className="row">
            {/*images go here*/}
          </div>
      </div>
  </React.Fragment>

zahra zamani · Accepted Answer · 2020-10-05 07:54:03Z

1

 const IMGS = [
      {
        id: 0,
        src:require("../img/a1.jpeg"),
      },
      {
        id: 1,
        src: require("../img/a1.jpeg"),
      },
      {
        id: 2,
        src:require("../img/a1.jpeg"),
      },
      {
        id: 20,
        src:require("../img/a1.jpeg"),
      },
    ]
    const imgFilter= IMGS.filter((img) => img.id >= 18 && img.id < 30)

     {imgFilter.map(p => {
          return <img key={p.id} src={p.src} />;
        })}

edited Oct 5, 2020 at 7:54

answered Oct 5, 2020 at 7:48

zahra zamani

1,38312 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hgb123 · Accepted Answer · 2020-10-05 07:44:52Z

1

Use filter

const IMGS = [
  {
    id: 0,
    path: "../img/a1.jpeg",
  },
  {
    id: 1,
    path: "../img/a1-01.jpeg",
  },
  {
    id: 2,
    path: "../img/a1-02.jpeg",
  },
  {
    id: 20,
    path: "../img/a1-03.jpeg",
  },
]

const res = IMGS.filter((img) => img.id >= 18 && img.id < 30)

console.log(res)

answered Oct 5, 2020 at 7:44

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

Collectives™ on Stack Overflow

How Use images from javascript array in react using filter and map function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related