Tag Error: React JSX Style Tag Error on Render

Issue

This is my react render function

render:function(){
  return (
    <div>
      <p className="rr">something</p>
      <style>
        .rr{
          color:red;
        }
      </style>
    </div>    
  )
}

This gives me this error

“JSX: Error: Parse Error: Line 22: Unexpected token :”

What’s wrong here?
Can I embed full normal css into a react component?

Solution

JSX is only a small extension to javascript, it’s not its own full blown templating language. So you would do it like in javascript:

return (
  <div>
    <p className="rr">something</p>

      <style>{"\
        .rr{\
          color:red;\
        }\
      "}</style>
  </div>
)

http://jsfiddle.net/r6rqz068/

However there is absolutely no good reason to do this at all.

Answered By – Esailija

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0