0

I just started a project in React. Somewhere I have read or seen a video that the creators were proud that unlike Angular you don't need to learn new tags and you use just plain old html.

I was quite surprised that react make me change <img style="..." /> to <img styles="" />. (It'sstylevsstyles`.)

My question is have I set something wrong or is it correct behaviour of JSX templates? How can I use plain old html in JSX?

The error I received was

invariant.js:38Uncaught 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.

Amio.io
  • 20,677
  • 15
  • 82
  • 117
  • 4
    Because jsx !====================== html (the operator here means "veeeeeeeeeeeeeeeeeeeeeeeeery not equal") "How can I use plain old html in JSX?" --- you cannot. It just occasionally looks similar, but they don't share any roots. – zerkms Jul 01 '16 at 08:47
  • Zerkms, I see. Thx. – Amio.io Jul 01 '16 at 08:53

2 Answers2

1

Firstly, if you want to keep you in-line style, you should have style={<your-css-rules>}, instead of styles="<your-css-rules>".

However, as tempting as it might seem to use in-line styling in React, I would keep the lesson learned about separation of concerns and use css classes.

So, in your example, you could do something like 

// CSS

imgClass {
    background-color: #d0e4fe;
}

// HTML
<img className="imgClass" />

This answer gives a good overview on when to avoid using in-line styling in React.

Community
  • 1
  • 1
U r s u s
  • 6,680
  • 12
  • 50
  • 88
0

https://facebook.github.io/react/tips/inline-styles.html

for inline style ,style is the correct way

Piyush.kapoor
  • 6,715
  • 1
  • 21
  • 21