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 ?

[brezetsky]

Sorry for late answer. Not sure how I can add this plugin to codepen. At least, code for reproducing you can find below.

<ContextMenuProvider id={'context_menu' }>
    Right click
</ContextMenuProvider>
<ContextMenu id={'context_menu' }>
    {enabled ?
       (<Item label="Item 1"/>) :
       (<Item label="Item 1" disabled />)
     }

     {false && <Item label="Item 2 will produce a error" />}
</ContextMenu>

[brezetsky]

If you can explain me how to add library to codepen - I will add a snippet

[fkhadra]

@brezetsky the code is enough thanks. I'll check it when I'm home.

[fkhadra]

Hey, in the next release this {false && <Item label="Item 2 will produce a error" />} will work without any issue.I'm almost done

[brezetsky]

Thanks.
Waiting for new release 👍

[fkhadra]

@brezetsky new release published. I still need to update the demo

[brezetsky]

@fkhadra problem still appear

[fkhadra]

@brezetsky you updated to the last version ?
I'll check when I'm home but it should work. I even included the case inside my test.
But i'll check asap.

[brezetsky]

Sure.
This works for me #11

[fkhadra]

@brezetsky new fix inc is few minutes. My test case was bad !
Fix is live. Sorry for the bug

[brezetsky]

Thanks.