Which one is the most appropriate to use in React, and why?
*NB: examples are in React jsx-syntax;
<div style={ condition ? {backgroundColor:'#d6f9dd'} : {} }>
<div style={ condition ? {backgroundColor:'#d6f9dd'} : undefined }>
<div style={ condition ? {backgroundColor:'#d6f9dd'} : null }>
<div style={ condition ? {backgroundColor:'#d6f9dd'} : 'inherit' }>
<div style={ condition ? {backgroundColor:'#d6f9dd'} : 'none' }>
>Solution :
Personally, I only ever use the style property if I need to overwrite a css attribute that was attached by a separate library.
Out of the options you provided the only ones that are valid are the following:
<div style={ condition ? {backgroundColor:'#d6f9dd'} : {} } />
<div style={ condition ? {backgroundColor:'#d6f9dd'} : undefined } />
React expects the style property to be either undefined or an object.
On top of that I would conditionally apply the css properties themselves rather than the entire style object.
Like so:
<div style={{ backgroundColor: condition ? '#d6f9dd' : undefined }} />
That way if I need to apply multiple style properties but one of them depends on the condition, the other one can still be applied even when the condition is not true. Setting a property to undefined is akin to never having included it in the style object at all.