I am trying to map over an array and find the index of object within array

Question

I have a component and I would like to find the index within the array of objects(for now I have a hardcoded array of objects, but later would be using a call to fetch data). I want to add a mdOffset of 2 on every fifth position of the array. How would i go about doing this? My code:

export default class Winks extends Component {
  constructor () {
    super()
    this.state ={
      items: [
        { id:1, name: "The Kooples - white top", url:"bloomingdales.com", src: "assets/male.png" },
        { id:2, name: "Sandro-Orange Zipper",  url:"saksfifth.com", src: "assets/female.png" },
        { id:3, name: "Sandro-Orange Zipper",  url:"saksfifth.com", src: "assets/female.png" },
        { id:4, name: "Sandro-Orange Zipper",  url:"saksfifth.com", src: "assets/female.png" },
        { id:1, name: "Sandro-Orange Zipper",  url:"saksfifth.com", src: "assets/female.png" },
        { id:1, name: "The Kooples - dress",  url:"bloomingdales.com", src: "assets/male.png" },
        { id:1, name: "The Kooples - dress",  url:"bloomingdales.com", src: "assets/male.png" },
      ]
    }
  }

  render () {

    var listItems = this.state.items.map.bind(this)(function(item) {
      if (this.state.items.indexOf(item) % 5 === 0 ) {
        var columns = (
          <Col md={2} mdOffset={2}>
              <img className='img-responsive' src={item.src}></img>
            <Row>
              <span>{item.name}</span>
            </Row>
            <Row className="pull-right">
              <i className="fa fa-heart"></i>
            </Row>
          </Col>
        )
      }

      else {
        var columns = (
          <Col md={2}>
              <img className='img-responsive' src={item.src}></img>
            <Row>
              <span>{item.name}</span>
            </Row>
            <Row className="pull-right">
              <i className="fa fa-heart"></i>
            </Row>
          </Col>
        )
      }

      return columns
    });

    return (
        <Row>
          {listItems}
        </Row>
    )
  }
}

EQuimper · Accepted Answer · 2016-10-06 19:54:48Z

2

When you map you get the index of the element as second argument https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Ex:

arr.map(function(item, index) {
  if (index % 5 === 0) {
    // do your stuff here
  }
});

Or

arr.map(function(item, index) {
  <Col mdOffset={index % 5 === 0 ? 2 : null}>

  </Col>
});

answered Oct 6, 2016 at 19:54

EQuimper

5,9298 gold badges31 silver badges42 bronze badges

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

3 Comments

finalfreq Over a year ago

If he wants every fifth element wouldn't this be off by one since index starts at 0? [1,2,3,4,5].forEach(function(item,index) { if (index % 5 === 0) { console.log(item) } }) the only item that would be logged is the first index since 0 % anything will be 0 and the 5th item would have an index of 4 thus not passing the conditional

EQuimper Over a year ago

Nice one yes I check this

Long Phan Over a year ago

I think i might have phrased it wrong, but what Emanual gave worked for me, I essentially want the 6th index or 5th item of the array to do something. [1,2,3,4,5,6].forEach(function(item,index) { if (index % 5 === 0) { console.log(item) } }) it spits out 0 and 6 which is what i wanted. 5 items in a row and the 6th one starts a new row

Collectives™ on Stack Overflow

I am trying to map over an array and find the index of object within array

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