How to conjoin multiple conditional renders in ReactJS?

Question

I have multiple conditional renders on my page. I have a table that shoes "discount" variables that represent different kind of discounts on a web store. Only one discount can be active at the time. How to achieve this when there are multiple types of discounts (more than two shown on code). Otherwise normal price is shown represent by result.price variable.

My conditions:

    let today = new Date()
    let month = today.getMonth() + 1;

    let seasonalDiscount = false;
    if (month === 2 || 6) {
      seasonalDiscount = true;
    }

    let amount_of_salesDiscount = false;
);
    if (this.state.data2.amount_of_sales >= 100) {
      amount_of_salesDiscount = true;
      console.log('amount_of_salesDiscount: ' + amount_of_salesDiscount );
    }

Rendered table:

            <tr>

              <td>{result.name}</td>

              {seasonalDiscount ? <td>{result.price * 0.9} </td> : <td>{result.price</td>}

              {seasonalDiscount ? <td>No discount</td> : <td>Season Discount (10%)</td>}

              {amount_of_salesDiscount ? <td> {result.price * 0.85} </td> : <td> {result.price}</td>}

              {amount_of_salesDiscount ? <td> Amount of sales discount (15%) </td> : <td> No discount</td>}

            </tr>

Sean · Accepted Answer · 2022-01-24 20:40:22Z

1

Wrap all of it in a function that returns the final html tags based on the met conditions. Then call the function inside the render function. Otherwise it can get too messy if you use a lot of ternaries in the render function.

answered Jan 24, 2022 at 20:40

Sean

1,4763 gold badges13 silver badges33 bronze badges

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

1 Comment

Sampo Kaarenmaa Over a year ago

Possible solution. Could you provide an example?

Justsolarry · Accepted Answer · 2022-01-24 23:59:22Z

Firstly, there are some mistakes in your conditions code

let seasonalDiscount = false;
    if (month === 2 || 6) {
      seasonalDiscount = true;
    }

Can be written as:

  const seasonalDiscount = month === 2 || month === 6;

Writing month === 2 || 6 is a common mistake. If month is 4 in this example. It would resolve as 4 === 2 || 6 which is false || 6 which is 6. You can try this manually in a console.

This is how you'll write it in your rendered table:

export const renderSeasonalDiscount = () => {
  if (seasonalDiscount) {
    return (
            <>
            <td>{ result.price * 0.9 } </td>
            <td>No discount</td>
            </>
    )
  } else {
    return (
            <>
            <td>{ result.price }</td>
                <td>Season Discount (10%)</td>
            </>
    )
  }
}

const renderAmountOfSalesDiscount = () => {
  if (amount_of_salesDiscount) {
    return (
            <>
            <td> { result.price * 0.85 } </td>
            <td> Amount of sales discount (15%) </td>
            </>
    )
  } else {
    return (
            <>
           <td> { result.price }</td>
           <td> No discount</td>
            </>
    )
  }
}

Then finally in your render code you can call both functions

{
  renderSeasonalDiscount()
  renderAmountOfSalesDiscount()
}

Collectives™ on Stack Overflow

How to conjoin multiple conditional renders in ReactJS?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related