React conditional statement within a map function

Question

I am displaying reviews from the Google Maps API. Within my map function I only want to display reviews that are higher than a 1 rating. How can I update my map function to only display reviews where review.rating > 1?

{this.state.reviews && this.state.reviews.map((review, index) => (
    <div key={index} className="review">
        <p>{review.text}</p>
    </div>
))}

instead of just immediately returning the JSX you could change it to a regular arrow function and run a check like if(review.rating ==1) return null; and then just wrap the rest of the JSX in a return statement as well — Jhecht
– Jhecht, Commented Dec 9, 2019 at 0:07

kind user · Accepted Answer · 2019-12-09 00:04:39Z

6

Just filter them before map:

{this.state.reviews
    .filter((review) => review.rating > 1) // get only reviews with rating > 1
    .map((review, index) => (
       <div key={index} className="review">
          <p>{review.text}</p>
       </div>
    ))
}

answered Dec 9, 2019 at 0:04

kind user

42k8 gold badges69 silver badges78 bronze badges

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

Comments

Jhecht · Accepted Answer · 2019-12-09 00:14:57Z

3

If, for some reason you don't want to call the .filter method on the array, you could do something like this. Basically you are calling a ternary operator in your return. Let me know if you need any more explanation.

{this.state.reviews && this.state.reviews.map((review, index) => (
  review.index > 1
   ? (<div key={index} className="review">
        <p>{review.text}</p>
    </div>)
   : null
))}

answered Dec 9, 2019 at 0:14

Jhecht

4,4352 gold badges31 silver badges48 bronze badges

Collectives™ on Stack Overflow

React conditional statement within a map function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related