CODEWITHSUNDEEP
reactjsreact-native
TyForHelpDude
TyForHelpDude

Reputation: 5001

"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): enter image description here

but jsx compiler dont allow it for some reason?

but if i move the table inside of div element; everything looks ok. enter image description here

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

Upvotes: 60

Views: 62644

Answers (4)

toshi
toshi

Reputation: 2814

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

Upvotes: 0

Ferrybig
Ferrybig

Reputation: 18834

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

Upvotes: 0

Kevin Amiranoff
Kevin Amiranoff

Reputation: 14493

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

Upvotes: 30

Mayank Shukla
Mayank Shukla

Reputation: 104469

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

Upvotes: 97

Related Questions