En JSX , podemos devolver solo un elemento html de return , no podemos devolver varios elementos, si desea devolver varios elementos, envuelva todo el código html en un div o en cualquier otro componente contenedor.

Lo mismo está sucediendo en su primer caso, está devolviendo 2 elementos, un div y una table . cuando los envuelve en un div , todo funciona correctamente.

La misma regla que debe seguir para conditional rendering de componentes.

Ejemplo:

Correcto:

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

Equivocado:

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

Solo una actualización rápida. Si está utilizando React v16.2.0 y superior, también puede usar Fragmentos .

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

También respondí a una pregunta similar, más detallada aquí .

Este error ocurre cuando la coma se interpreta como "operador de coma" y no como coma dentro de matrices, objetos, etc.

El operador de coma evalúa cada expresión separada por coma y devuelve el último valor.

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

En este ejemplo, se asignará 3 a foo. Pero es muy probable que el pensamiento del autor (1, 2, 3) se asigne como una tupla de Python. Entonces este error existe.

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

Entonces, si encontró este error, es probable que haya algunos errores en su matriz/objeto/etc. y se interprete como "operador de coma".

Código de ejemplo que causa este 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. }