React inline style - style prop expects a mapping from style properties to values, not a string

Issue

I am trying to set inline styles in my React application. In this case, for a span:

<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>

React tells me:

Uncaught Invariant Violation: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by `SentenceView

I am not quite sure what it means.

PS: I have tried different versions, so I did paddingRight: 5 as well as paddingRight: 5 + 'px' as well as paddingRight : 5px, but I didn't have any success!

Solution

Use "styles" prop instead of style

<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>

Here is a great reference from W3Schools which also shows you how to create an object with styling information, and refer to it in the style attribute: reference for how to style React using CSS

Answered By - dattebayo