How to set || operator with jsx ? React

Question

I need to set up two if with React this is my code:

      <div>
        {item?.status === "One" ||
          (item?.status === "Two" && (
            <Button 
              btn="primary"  title="One text"
            />
          ))}

           <Button btn="primary" title="Two text" />
       </div>

I need to render first button if item.status === "One" or ( || ) "Two" but this is no work? Where is problem ?

The logic here says: if === "One", then nothing. if !== "One", then if === "Two", then show the button — Codebling, Dec 13 '21 at 23:09

score 1 · Answer 1 · answered Dec 13 '21 at 23:08

Why don't you try

<div>
  {(item?.status === "One" || item?.status === "Two") && (
    <Button btn="primary" title="One text" />
  )}
  <Button btn="primary" title="Two text" />
</div>;

You had encapsulated (item?.status === "Two" && <Button btn="primary" title="One text" />) which may caused a problem with your logic.

score 1 · Answer 2 · answered Dec 13 '21 at 23:08

Fix your parenthesis for your rendering condition. You should wrap your boolean expression and code statement like {(boolean expressions) && (code statements)}:

 <div>
    {
    (item?.status === "One" || item?.status === "Two") && (
        <Button 
          btn="primary"  title="One text"
        />
      )
    }

       <Button btn="primary" title="Two text" />
   </div>

The line separation for the parenthesis and braces is just a stylistic preference of mine.

How to set || operator with jsx ? React

2 Answers2