“left side of comma operator..” error in html content of render

In JSX, we can return only one html element from return, can’t return multiple elements, if you want to return multiple elements then wrap all the html code in a div or by any other wrapper component.

Same thing is happening in your 1st case, you are returning 2 elements, one div and one table. when you are wrapping them in one div everything is working properly.

Same rule you have to follow for conditional rendering of components.

Example:

Correct:

{ 1==1 /* some condition */ ? 
    <div>
        True
    </div> 
: 
    <div>
        False
    </div>
}

Wrong:

{ 1==1 /* some condition */ ? 
    <div>
        True 1
    </div>
    <div>
        True 2
    </div> 
: 
    <div>
        False 1
    </div>
    <div>
        False 2
    </div>
}