score:95

Accepted answer

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

score:0

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

score:0

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

score:30

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


Related Query

More Query from same tag