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

user_7320045 0
Viewed 14879
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.

reactjs javascript
2 Answers

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>
  );
 }
}
user_70241560

Let's try with hope this helpful for u.

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;

or 

import React, { Component } from 'react';

class App extends Component {
  render() {
  const name = 'Red Header';

  return (
    <div style={{backgroundColor : 'red'}}>
      {name}
    </div>
  );
 }
}

export default App;
user_78330770
Related