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
– Taras Yaremkiv, Commented Mar 23, 2017 at 11:17
Do you have a link that references map method referencing index? — Matthew Farlymn
– Matthew Farlymn, Commented Mar 23, 2017 at 11:52

Dan Cantir · Accepted Answer · 2017-04-05 17:28:44Z

1

You can use slice method before map.

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

edited Apr 5, 2017 at 17:28

answered Mar 23, 2017 at 11:16

Dan Cantir

2,96517 silver badges25 bronze badges

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

1 Comment

Matthew Farlymn Over a year ago

Thanks! Exactly what I needed.

Collectives™ on Stack Overflow

Show specific number of array objects (React)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related