React: Loop over data and create rows with three items in a row

Question

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?

bennygenel · Accepted Answer · 2017-10-10 22:24:31Z

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

  }
});

please help me one issue to reload the listview react native : stackoverflow.com/questions/46658124/…
You used the word "reminder" (twice) which is a typo of the word "remainder". You are missing an "a" in both cases.

linasmnew · Accepted Answer · 2017-10-10 22:25:21Z

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>

+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

Javed · Accepted Answer · 2017-10-10 22:11:48Z

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

answered Oct 10, 2017 at 22:11

Javed

4705 silver badges17 bronze badges

1 Comment

Beto Over a year ago

The link led me to the best possible solution to my problem. Thanks.

Collectives™ on Stack Overflow

React: Loop over data and create rows with three items in a row

3 Answers 3

2 Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Linked

Related