The `style` prop expects a mapping from style properties to values, not a string

Question

import React, { Component } from 'react';

class App extends Component {
  render() {
  const name = 'Red Header';
  const styleRed = {backgroundColor : 'red'};
  return (
    <div style="{styleRed}">
      {name}
    </div>
  );
 }
}

export default App;

That is my code I write the style object properly, but react still arguing. Why this happens It says :

'For example, style={{marginRight: spacing + 'em'}} when using JSX.'.

My code looks like the one above, but react argues.

Answer 1

Try removing "" from the style props. https://codesandbox.io/s/6j91o6z56w

import React, { Component } from 'react';

class App extends Component {
  render() {
  const name = 'Red Header';
  const styleRed = {backgroundColor : 'red'};
  return (
    <div style={styleRed}>
      {name}
    </div>
  );
 }
}