Unpossible to use React condition

[brezetsky]

next structure doesn't work in case of condition is false
{condition && <Separator/> && <Item label="label" disabled/>}

[fkhadra]

Can you give more details? I don't get the point here...

[brezetsky]

Updated. Added like a code this time. Please, look on it one more time.

[fkhadra]

if the condition is false with the following structure {condition && <Separator/> && <Item label="label" disabled/>} it will always be false.

If you want to render a separator or an item depending on the condition a ternary is what you are looking for.
condition ? <Separator/> : <Item label="label" disabled/>

This has nothing to do with the component, it's pure javascript in that case.

If I miss something please tell me.

[brezetsky]

Yes. Your code works. But I would like just if condition. And it something what I have done.
But if condition is true, I would like to add item to menu and without else.

{condition && && } it will always be false. And problem that it produce error.

[brezetsky]

Like Inline If with Logical && Operator here https://facebook.github.io/react/docs/conditional-rendering.html

[fkhadra]

Ok I start to understand now 😁 . If your condition is true you want to render both the <Separator /> and <Item /> ?

[fkhadra]

In that case : {condition && <Separator/> && <Item label="label" disabled/>} if the condition is true only
<Item label="label" disabled/> will be rendered

[brezetsky]

Can not agree with you. If condition is true both of them will rendered and it works perfectly.
But problem if condition return false.

[fkhadra]

If i do the following : {true && <h1>foo</h1> && <div>bar</div> } only bar is rendered.

Snippet here : codepen.

Can you provide a pen ?

[brezetsky]

Yes. You are right about true condition
What about false conditions. It's produce a error. And it was my question originally

[fkhadra]

What you need to do is :
{false && (<div><h1>foo</h1><div>bar</div></div>)} As you can see you need to wrap the element.
{false && (<h1>foo</h1><div>bar</div>)} . Without the div it won't work.

So in your case, it will be easier if you do because you can't group the separator and the item :

{condition && <Separator />}
{condition && <item />}

snippet : codepen

[brezetsky]

That is not a problem. Problem exists in that moment when condition is false
Then {condition && < Separator />} returns error

[brezetsky]

And my expectation is not see separator it item if conditions will be false, without any error

[fkhadra]

Can you send me the full snippet so I can reproduce the issue ?