Reacjs Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + ’em’}} when using JSX

This error occurs when you try to pass regular CSS strings to the style attribute of an HTML element. In React, the styling is different, instead of an string the style attribute expects an object.

So instead of doing this:

<p style="font-size: 12px; color: black" >text</p>

you should do this:

var pStyle {
   fontSize: '12px',
   color: 'black',
<p style={pStyle} >text</p>

Note that the name of some CSS attributes are a little bit different in React, you should always write them camelCased. As you can see in this example the font-size attribute became fontSize.

That’s pretty much it! Hope it helps.

Recommended for you

How to Set up a Database connection with ReactJS The short answer to this question is: You shouldn't use React to connect directly to your database. React is a front-end framework, it should only be responsible for the user interface. If you need a database connection, the right place for it is the back-end, that's also where you're going to fetch...
How to use Bootstrap in a Reactjs project Styling is a little bit different in Reactjs, so you cannot use Bootstrap in a traditional way. In this tutorial I'm going to show you an easy way to add Bootstrap to a Reacjs project. As we can't use the traditional Bootstrap we have to use another version called React-Bootstrap, it's basically the...
How to load a JSON file in Reactjs It's really easy to load data from a JSON file in React. In this post I'm going to show you how you can do that. First, of course, we need a JSON file, you probably already have yours, but I'm using this movies list for this example: data.json Now we have to place this file somewhere ins...
Compiling JSX ReactJS code with Browserify and Reactify This will be a very basic tutorial for those who are just getting to know React, by now you should have noticed that React uses JSX code, which is basically Javascript with some HTML elements. The problem here is that the browser cannot understand JSX, if you have already tried it you probably saw ...

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>