"left side of comma operator.." error in html content of render

Its straightforward process;

Here is the origin render method I want it to be(I want my table outside of div):

but jsx compiler dont allow it for some reason?

but if i move the table inside of div element; everything looks ok.

so only diff is place of table. why jsx interfere this process ? why its necessary ?

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>
}

Just a quick update. If you are using React v16.2.0 and above you also can use Fragments.

  return (
    <>
        <div>
            True 1
        </div>
        <div>
            True 2
        </div> 
    </>
  );

I also replied to a similar question, more in depth here

Another cause of this error is accidentally ending your line with a comma instead of a semicolon, this might happen because you make a mistake during refactoring of your code.

These give errors

return <div>hi</div>, // error
return (<div>hi</div>,) // error

These are correct:

return <div>hi</div>; // ok
return (<div>hi</div>) // ok
return (<div>hi</div>); // ok

This error is more cofusing in this case, since it highlights the whole JSX block, instead of the comma

This error occurs when the comma is interpreted as “comma operator” and not comma within arrays, objects, etc.

Comma operator evaluates each expression separated by comma and returns the last value.

const foo = (1, 2, 3) // returns 3

In this example, 3 will be assigned to foo. But it is highly likely that author thought (1, 2, 3) will be assigned like python tuple. So this error exists.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

So if you encountered this error, chances are there are some mistakes in your array/object/etc and it is interpreted as "comma operator".

Example code which causes this error.

const foo = (expr) => {
  const bar = ""
  const baz = ""

  switch (expr) {
    case 'Oranges', 'Mangoes': // error, you can't use comma for switch
      break;
    case 'Papayas':
      break;
  }


  { bar, baz } // You forgot to write return. Javascript thinks this is comma operator.
}