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.

Reactjs Error: Adjacent JSX elements must be wrapped in an enclosing tag

This is a very common Reactjs error, specially for beginners. If you are getting this error you code probably looks like this:

class App extends Component {
  render() {
    return (
        <Component1></Component1>
        <Component2></Component2>
    );
  }
}

The problem is that your render function is returning two elements, it’s equivalent to adding two return statements to your function, and reactjs won’t allow that.

The solution is very simple, you just have to add an enclosing tag as described in the error message. After this modification the code should look like this:

class App extends Component {
  render() {
    return (
      <div>
        <Component1></Component1>
        <Component2></Component2>
      </div>
    );
  }
}

As you can see I’ve added a div as an enclosing tag, now the function is returning only one element. This this should fix the problem, but if it doesn’t please let me know in the comments.