I have an array of items, 9 be exact attached to my state:

 state =  {
    menuItems: [
        {
            id: 0,
            name: 'Foods',
            iconSrc: 'food.jpg'
        },
        {
            id: 1,
            name: 'Drinks',
            iconSrc: 'drinks.jpg'
        },
        {
            id: 2,
            name: 'Snacks',
            iconSrc: 'snacks.jpg'
        }
   ]

and want to loop over them, however i have 9 items in the array and want to do the following: group every three items in the array under a new div, like so:

<div class="row-container">
   <div class="col-4">
        <div class="col-2">Item 1</div>
        <div class="col-2">Item 2</div>
        <div class="col-2">Item 3</div>
    </div>
    <div class="col-4">
        <div class="col-2">Item 4</div>
        <div class="col-2">Item 5</div>
        <div class="col-2">Item 6</div>
    </div>
    <div class="col-4">
        <div class="col-2">Item 7</div>
        <div class="col-2">Item 8</div>
        <div class="col-2">Item 9</div>
    </div>
</div>

How do I achieve that using the map function within React?

I have an array of items, 9 be exact attached to my state:

 state =  {
    menuItems: [
        {
            id: 0,
            name: 'Foods',
            iconSrc: 'food.jpg'
        },
        {
            id: 1,
            name: 'Drinks',
            iconSrc: 'drinks.jpg'
        },
        {
            id: 2,
            name: 'Snacks',
            iconSrc: 'snacks.jpg'
        }
   ]

and want to loop over them, however i have 9 items in the array and want to do the following: group every three items in the array under a new div, like so:

<div class="row-container">
   <div class="col-4">
        <div class="col-2">Item 1</div>
        <div class="col-2">Item 2</div>
        <div class="col-2">Item 3</div>
    </div>
    <div class="col-4">
        <div class="col-2">Item 4</div>
        <div class="col-2">Item 5</div>
        <div class="col-2">Item 6</div>
    </div>
    <div class="col-4">
        <div class="col-2">Item 7</div>
        <div class="col-2">Item 8</div>
        <div class="col-2">Item 9</div>
    </div>
</div>

How do I achieve that using the map function within React?

• javascript
• arrays
• reactjs

3 Answers 3

You can get use of modulus(Reminder). Modulus will tell you the reminder of the division for given integer.

The remainder operator returns the remainder left over when one operand is divided by a second operand. It always takes the sign of the dividend, not the divisor. It uses a built-in modulo function to produce the result, which is the integer remainder of dividing var1 by var2

Example

this.state.menuItems.map((item, index) => {
  if (((index + 1) % 3) === 1) {

    return (
      <div className="col-4">
      <div className="col-2">{item.name}</div>
    );

  } else if (((index + 1) % 3) === 2) {

    return (<div className="col-2">{item.name}</div>);

  } else if (((index + 1) % 3) === 0) {

    return (
      <div className="col-2">{item.name}</div>
      </div>
    );

  }
});

If i understand your question correctly, this should work, let me know if this is what you meant please

renderMenuItems() {
    let items = this.state.menuItems.map((item, index) => {
       return ( 
         <div class="col-4" key={item.id}>
          <div class="col-2">{item.id}</div>
          <div class="col-2">{item.name}</div>
          <div class="col-2">{item.iconSrc}</div>
        </div>
       );

   });
   return items;
}

Then inside of your render:

<div class="row-container">
  {this.renderMenuItems()}
</div>

This would create:

<div class="row-container">
   <div class="col-4">
        <div class="col-2">0</div>
        <div class="col-2">Foods</div>
        <div class="col-2">food.jpg</div>
    </div>
    <div class="col-4">
        <div class="col-2">1</div>
        <div class="col-2">Drinks</div>
        <div class="col-2">drinks.jpg</div>
    </div>
    <div class="col-4">
        <div class="col-2">2</div>
        <div class="col-2">Snacks</div>
        <div class="col-2">snacks.jpg</div>
    </div>
</div>

You can try to transform the array into subset of arrays containing three elements and then map them to spit what you want.

Look here for an example Split array into chunks of N length