Minimize the code of conditional statement

Question

Is there any way so that I can minimize the following code-

    <div className="App">
      <Checkbox parameter={parameter1} setParameter={setParameter1}></Checkbox>

      { parameter1.country && parameter1.category ?
        <ShowData parameter1={parameter1}></ShowData>
        : ""
      }
      { parameter1.country && parameter1.category ?
        <Chart1></Chart1>
        : ""
      }
      { parameter1.country && parameter1.category ?
        <Chart2></Chart2>
        : ""
      }

    </div>

Here I have mentioned parameter1.country && parameter1.category three times. I want to write just single time.

those three "conditions" are all the same - so why not just lump all the html into one block between `?` and `:` — Jaromanda X, Oct 08 '20 at 05:16

score 1 · Accepted Answer · answered Oct 08 '20 at 05:24

1

<div className="App">
  <Checkbox parameter={parameter1} setParameter={setParameter1}></Checkbox>
  { parameter1.country && parameter1.category &&
    <React.Fragment>
      <ShowData parameter1={parameter1}></ShowData>
      <Chart1></Chart1>
      <Chart2></Chart2>
    </React.Fragment>
  }
</div>

Based on your code sample, parameter1.country && parameter1.category is common for all conditions and rather use ? ternary operator, I would like to suggest && will reduce empty string on your code.

Use <React.Fragment> to combined all the similar components.

answered Oct 08 '20 at 05:24

ankitkanojia

3,072
4
22
35

1

Instead of using ``, you can just use `<>` at the start and `>` at the end. These give the game output, and `<>` is common practice to do. – Samathingamajig Oct 08 '20 at 06:13
Yeah any one of the preferrable, Both will work. Thank you @Samathingamajig. – ankitkanojia Oct 08 '20 at 06:18

score 1 · Answer 2 · answered Oct 08 '20 at 07:09

1

<div className="App">
      <Checkbox parameter={parameter1} setParameter={setParameter1}></Checkbox>
      { 
        parameter1.country && parameter1.category &&
        <>
        <ShowData parameter1={parameter1}></ShowData>
        <Chart1></Chart1>
        <Chart2></Chart2>
        </>
      }
    </div>

answered Oct 08 '20 at 07:09

Piyush Rana

631
5
8

You can also try this. – Piyush Rana Oct 08 '20 at 07:09

Alok Mali · Answer 3 · 2020-10-08T06:37:03.550

0

There is the same condition that you applied thrice in your code. And in all the three places you are showing nothing in case of the false condition.

I think you can do it by below code -

<div className="App">
  <Checkbox parameter={parameter1} setParameter={setParameter1}></Checkbox>
  { parameter1.country && parameter1.category ?
    <div>
     <ShowData parameter1={parameter1}></ShowData>
     <Chart1></Chart1>
     <Chart2></Chart2>
    </div>
    : ""
  }
</div>

edited Oct 08 '20 at 06:37

answered Oct 08 '20 at 05:25

Alok Mali

2,821
2
16
32

Shows an Error- https://i.stack.imgur.com/2urE8.png – Hassan Rahman Oct 08 '20 at 05:58
You need to put the component selectors in a div or react fragment. I have updated my answer, please check. – Alok Mali Oct 08 '20 at 06:36

Minimize the code of conditional statement

3 Answers3