How to embed literal <code> snippet within React/JSX component?

Question

I'm new to React, and I'm trying to render a static CSS code sample within a React component, like this:

React.createClass({
  render: function() {
    return (
      <code> body { color: blue; } </code>
    )
  }
});

However, this does not seem to work.

Is there some special way for me to escape code like this, or am I doing something wrong?

Answer 1

@ColonelThirtyTwo's answer does the trick:

<code>{"body { color: blue; }"}</code>

Answer 2

It is probably also worth noting that this can be done with multiline strings too:

<code>{`
  html { background: red; }
  body { color: blue; }
`}</code>