How to break loop after 2nd element on react js inside map function

Question

i have the followning element from map function and i want to break it into 2 element.

From this element:

<div class ="row">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>

TO:

<div class ="row">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
</div>

<div class ="row">
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>

Thank You!

React code:

{this.props.listdisplay
.filter(item => item.status === 1)
.map((item, i) => { 
    return <div className="col-md-3 col-sm-6" key={browse-by-${i}}> 
             <div className="food-block"> 
               <img src={item.icon} id={item.id} className="center-block img-responsive"/> 
                 <p className="text-center">
                   <a href="">{item.name}</a>
                 </p> 
             </div> 
          </div> 
}) }

{this.props.listdisplay.filter(item => item.status === 1).map((item, i) => { return <div className="col-md-3 col-sm-6" key={browse-by-${i}}> <div className="food-block"> <img src={item.icon} id={item.id} className="center-block img-responsive"/> <p className="text-center"><a href="">{item.name}</a></p> </div> </div> }) } — Dinesh ghimire
– Dinesh ghimire, Commented Aug 10, 2017 at 12:01

racz_gabor · Accepted Answer · 2017-08-11 05:18:22Z

1

You could slice the arrays and map after them like this:

before return

let array = this.props.listdisplay.filter(item => item.status === 1);
let length = array.length;

in return

array.slice(0, (length + 1) / 2).map(.....)
array.slice((length + 1) / 2, length).map(.....)

The other thing if you want to create divs with two elements I can think of two solution (not a really beautiful solution though):

First: we creating the elements first before return:

var newList = [];
var array = this.props.listdisplay.filter(item => item.status === 1);
for (var i = 0; i < array.length + 1 / 2; i++) {
     var item = array[i];
     i++;
     var item2 = array[i];
     if (item2) {
         newList.push(<div class ="row">
                 <div class="col-md-3">item.id</div>
                 <div class="col-md-3">item2.id</div>
             </div>);
     } else {
         newList.push(<div class ="row">
                 <div class="col-md-3">item.id</div>
                 <div class="col-md-3">item2.id</div>
             </div>);
     }
}
return <div>{newList}</div>

Second: we can loop through the list and we always store the elements what are on odd index nr:

before return

var oddItem = null;

inside return:

{this.props.listdisplay.filter(item => item.status === 1).map((item, i) => {
    if (i%2 === 1) {
        oddItem= item;
    }

    return i%2 === 0 ? 
        <div class ="row">
            <div class="col-md-3">oddItem.id</div>
            <div class="col-md-3">item.id</div>
        </div> : '';
})}
/* If the array length is odd we remain one item in the oddItem so we need to add that too */
{this.props.listdisplay.filter(item => item.status === 1).length % 2 === 1 ? 
     <div class ="row">
         <div class="col-md-3">oddItem.id</div>
     </div>: ''}

edited Aug 11, 2017 at 5:18

answered Aug 10, 2017 at 12:27

racz_gabor

2791 silver badge9 bronze badges

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

2 Comments

Dinesh ghimire Over a year ago

I have gone through the example but what i want is in every 2nd element the loop should be break automatically. the code u send me just manually. if i have 2000 item which need to be break in row with two item then this code wont help me isnt it. Hope u have got my point. Thank u

racz_gabor Over a year ago

Ok, for me the break it into 2 element, means break it in to two array, I will write down the other solution too but that's a hack, I guess, not a beautiful solution.

Collectives™ on Stack Overflow

How to break loop after 2nd element on react js inside map function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related