TS18007: JSX expressions may not use the comma operator. Did you mean to write an array?

Right after adding TypeScript into my react application, I’ve started getting these errors:

TS18007: JSX expressions may not use the comma operator. Did you mean to write an array?

Here are few snippets from code base in which I am getting this error:

 style={pageStyles.fundContainer, { padding: updatedAt ? '8px 16px 20px 16px' : '16px 16px 20px 16px' }}

Another example:

className={ 'materialize-textarea', getErrorClass(errors, 'state') }

I am new to this codebase, but at first glance I can sense that above snippets are wrong, but not able to find anything working.

Any light on this would be really appreciated.

>Solution :

I don’t quite know what the author of the code was trying to do. Code like this…

style={pageStyles.fundContainer, { padding: updatedAt ? '8px 16px 20px 16px' : '16px 16px 20px 16px' }}

…means "evaluate pageStyles.fundContainer, but then completely ignore it. Then assign the second object to the style prop". In other words, the result is no different than just doing:

style={{ padding: updatedAt ? '8px 16px 20px 16px' : '16px 16px 20px 16px' }}

Since i don’t understand what they were trying to do, i’m just going to have to guess. Maybe they were trying to merge two objects together? In which case the correct way would be:

style={{
  ...pageStyles.fundContainer,
  padding: updatedAt ? '8px 16px 20px 16px' : '16px 16px 20px 16px'
}}
// OR:
style={Object.assign(
  {}, 
  pageStyles.fundContainer, 
  { padding: updatedAt ? '8px 16px 20px 16px' : '16px 16px 20px 16px' }
)}

And for the className case, maybe they were trying to concatenate the strings?

style={'materialize-textarea ' + getErrorClass(errors, 'state')}
// OR:
style={`materialize-textArea ${getErrorClass(errors, 'state')}`}