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 ?
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.
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.