6

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?

Beto
  • 772
  • 2
  • 12
  • 26

3 Answers3

8

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>
    );

  }
});
bennygenel
  • 23,896
  • 6
  • 65
  • 78
  • please help me one issue to reload the listview react native : https://stackoverflow.com/questions/46658124/checked-unchecked-doesnt-working-in-listview-react-native/46658636#46658636 – Kirit Modi Oct 11 '17 at 06:07
  • You used the word "reminder" (twice) which is a typo of the word "remainder". You are missing an "a" in both cases. – user1718888 Feb 02 '23 at 15:57
2

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>
linasmnew
  • 3,907
  • 2
  • 20
  • 33
  • 1
    +1 for `.map()`, this is what I use everywhere, simple and effective. This is also a good answer with clear instructions to solve the question – Phil Gibbins Oct 10 '17 at 22:36
1

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

Javed
  • 460
  • 4
  • 15