Pass an object to the map function using another function

Question

I'm trying to make the following code prettier. Specifically, I would like to pass the values to the map function using another function.

Here is the code:

...   
      this.props.slides.map((s)=>{
              let id = s.get('id')
              let title = s.get('title')
              let image = s.get('image')
              let alt = s.get('alt')
              let caption = s.get('caption')
              return(

                    <Carousel.Item key={id} >
                    <img width={900} height={500} alt={s.get('alt')} src={image} alt={alt}/>
                    <Carousel.Caption>
                      <h3>{title}</h3>
                      <p>{caption}</p>
                    </Carousel.Caption>
                  </Carousel.Item>

              )
      })       
    }
    </Carousel>)
  }
}

...

So basically I need another method there (it's all part of a class) like:

listSlides(){
...
}

and then I can just pass that to my map function. But, I'm unsure on how to write it. I'm a bit confused about the way map() works.

The docs state that the first parameter is a function that's being passed to each item in the array but I'm unsure why does that mean that I can now do: let id = s.something in myclosured function?

It may be simpler than you think. Try just cutting and pasting the code with in map() into a function, and put the function name in map(listSlides). If you run into a problem post the code you tried. — bloodyKnuckles
– bloodyKnuckles, Commented Jul 6, 2016 at 18:31
listSlides should not really a become a method of your class, it does not do anything special. It should be just a function declaration (inside the method or outside the class), a static method maybe, but better a method of s if at all. — Bergi
– Bergi, Commented Jul 6, 2016 at 19:00

danh · Accepted Answer · 2016-07-06 18:59:32Z

1

Add a parameter to the function and pass it like this:

this.props.slides.map(s=>listSlides(s))

Even more concise (thanks to @Bergi)

this.props.slides.map(listSlides);

And the function becomes:

function listSlides(s){
    let id = s.get('id')
    // and so on
}

edited Jul 6, 2016 at 18:59

answered Jul 6, 2016 at 18:31

danh

62.7k10 gold badges100 silver badges139 bronze badges

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

3 Comments

S. Schenk Over a year ago

Thanks, that was along what I was thinking should do, but I still don't understand the get thing. is that method a part of the javascript prototype and that's why I can append it to my s variable?

danh Over a year ago

Yes, but the other way around. You can invoke the function get on 's' iff the object that s represents implements it (has get as part of its prototype). In other words, whatever objects are in the array returned by props.slides must be able to respond to get. It is incidental to how map works. Map will just pass each element in the array to the function and produce a new array with whatever that function returns for each element.

Bergi Over a year ago

Actually it should be this.props.slides.map(listSlides) - no need for an arrow function

Collectives™ on Stack Overflow

Pass an object to the map function using another function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related