jsx display page variations under a condition of a boolean

Question

I was looking to display Parameters and Disconnect in my homepage if the states of the var userConnected is true and to display only Login and Register if the state of userConnected is false.

I would like to see the 2 first if user isn't connected and only the 2 others if user is connected.

I don't know how do this, it would be something like a variation page depending on a boolean.

Answer 1

The whole JSX structure is essentially just an expression, and you can introduce conditional parts of an expression with the ternary conditional operator. In JSX that might look something like this:

<Parent>
  {
    someBoolean ?
      <Child1 /> :
      <Child2 />
  }
</Parent>

Of course, <Child1 /> or <Child2 /> can themselves be an entire tree of JSX elements, and can have further conditional expressions therein, etc. (Or can just be null if you don't want to render anything for a given condition.) But the structure is still the same.