Checking multiple conditionals in reactjs

Question

How do we check multiple conditions in reactjs.
There's an ? operator, but it only checks one condition.

I want to check the status of three buttons. If it is true, they are rendered otherwise not.

Example -> If button 1 is true , render button 1
If button 2 is false, dont render button 2
If button 3 is true, render button 3

Dmitriy Nevzorov · Accepted Answer · 2017-03-10 11:07:20Z

3

You can do

<div>
  {yourCondition1 && <button>Button 1</bitton>}
  {yourCondition2 && <button>Button 2</bitton>}
  {yourCondition3 && <button>Button 3</bitton>}
</div>

answered Mar 10, 2017 at 11:07

Dmitriy Nevzorov

6,0881 gold badge24 silver badges28 bronze badges

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

Comments

Mayank Shukla · Accepted Answer · 2017-03-10 12:19:30Z

1

{
      isButton_1 ? <button type="submit"> Button 1 </button>  : ' ' ||
      isButton_2 ? <button type="submit"> Button 2 </button>  : ' ' ||
      isButton_3 ? <button type="submit"> Button 3 </button>  : ' '
}

edited Mar 10, 2017 at 12:19

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

answered Mar 10, 2017 at 11:50

Naveen Heroorkar

898 bronze badges

2 Comments

mayersdesign Over a year ago

Please use four spaces indent to format your answer as code :)

SuperLemon Over a year ago

I prefer the chosen answer but this will work too; I would only change the return value to null instead of an empty string(or in this case a space) when it evaluates to false.

Collectives™ on Stack Overflow

Checking multiple conditionals in reactjs

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related