Check if condition in react map function

Question

I have working code and a little problem with the if statement in the map function here is code.

<main className="grid-b">
    {offers.map((offers,index)=> {
        if(offers.status==='pending')
        return
        <
        <article>
            <div className="text-b">
                <h3>Post ID: {index + 1}</h3>
                <p>Quantity (Kg): {offers.quantity}</p>
                <p>Unit Price (Rs): {offers.value}</p>
                <p>Expiry Date: {moment(offers.expiryDate).fromNow()}</p>
                <p>Offer Gives: {moment(offers.offerCreatedAt).fromNow()}</p>
            </div>
        </article>
        />
    })}
</main>

Now I want to check if the statement to render only when in map offers.status==='pending' if not, does not show anything. But this code does not work. How should I solve this issue?

segFault · Accepted Answer · 2021-08-07 06:06:39Z

4

You are using the same variable name (offers) in both the map and the parent function which is likely the issue. Change the map variable to something like offer and it should work as intended. You also have a typo in your mapped render.

e.g.

<main className="grid-b">
    {offers.map((offer,index)=> {
        if(offer.status==='pending')
        return (
          <article>
            <div className="text-b">
                <h3>Post ID: {index + 1}</h3>
                <p>Quantity (Kg): {offer.quantity}</p>
                <p>Unit Price (Rs): {offer.value}</p>
                <p>Expiry Date: {moment(offer.expiryDate).fromNow()}</p>
                <p>Offer Gives: {moment(offer.offerCreatedAt).fromNow()}</p>
            </div>
          </article>
        );
    })}
</main>

answered Aug 7, 2021 at 6:06

segFault

4,0541 gold badge21 silver badges34 bronze badges

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

Comments

Ayush Gupta · Accepted Answer · 2021-08-07 06:14:16Z

1

You are not supposed to use the same name in the arrow function. Note the following changes:

<main className="grid-b">
    {offers.map((offer,index)=> 
        offer.status==='pending' &&(
        <article>
            <div className="text-b">
                <h3>Post ID: {index + 1}</h3>
                <p>Quantity (Kg): {offers.quantity}</p>
                <p>Unit Price (Rs): {offers.value}</p>
                <p>Expiry Date: {moment(offers.expiryDate).fromNow()}</p>
                <p>Offer Gives: {moment(offers.offerCreatedAt).fromNow()}</p>
            </div>
        </article>
    ))}
</main>

answered Aug 7, 2021 at 6:14

Ayush Gupta

1,2652 gold badges12 silver badges28 bronze badges

Comments

Amila Dulanjana · Accepted Answer · 2021-08-07 07:22:47Z

1

Also you can filter the offers list.

offers.filter(offer => offer.status==='pending').map((offer,index)=> {

}

answered Aug 7, 2021 at 7:22

Amila Dulanjana

1,9141 gold badge20 silver badges34 bronze badges

Collectives™ on Stack Overflow

Check if condition in react map function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related