Show specific number of array objects (React)

Question

I am trying to loop through JSON data and only show the first "4" results, but through all of my searching most of the answers I have seen use forEach() or map() which loops through all of the data. I have tried using for(), but it results in nothing displaying on the page. If anyone can help or direct me to an answer I haven't been able to find that would be great!

{this.state.products.map(function(product) {
    return(
        <div className="col-xs-12 col-sm-6 col-md-3" key={product.productId}>
            <img src={product.productImage1} Image1 alt="Logo"/>
            <h3>{product.productTitle}</h3>
            <p>{product.productDesc}<a href="/">Learn More</a></p>
        </div>
    );
})}

May be you should use index parameter in map method- like ( if index < 4 ...) — Taras Yaremkiv, Mar 23 '17 at 11:17
Do you have a link that references map method referencing index? — Matthew Farlymn, Mar 23 '17 at 11:52
http://stackoverflow.com/questions/26371083/javascript-arraymap-index-argument — Taras Yaremkiv, Mar 23 '17 at 11:53

Dan Cantir · Accepted Answer · 2017-04-05T17:28:44.307

1

You can use slice method before map.

{this.state.products.slice(0, 4).map(...)}

edited Apr 05 '17 at 17:28

answered Mar 23 '17 at 11:16

Dan Cantir

2,915
14
24

Thanks! Exactly what I needed. – Matthew Farlymn Mar 23 '17 at 11:52

Show specific number of array objects (React)

1 Answers1