Use <code> or similar tags in ReactJS using JSX

Question

I am trying to use ReactJS with JSX to create a proof of concept for a styleguide.

I wanted to be able to display the raw html of how to call on components doing this. JSX is ignoring my <code> tags and rendering out the component

This is what i have tried so far Display HTML code in HTML

<blockquote>
  <pre>
    <code>
      <VideoPlayer 
        ref="videoplayer" 
        preload={this.props.preload} 
        classes={this.props.classes} 
        videoID={this.props.videoID}
        controls="controls" 
      />     
    </code>
  </pre>
</blockquote>

I was surprised to see it render.

Answer 1

In your example, react interprets your code as JSX. You need to use JSX-save coding. The easiest is to include a string literal:

<pre>{`
  <VideoPlayer 
    ref="videoplayer" 
    preload={this.props.preload} 
    classes={this.props.classes} 
    videoID={this.props.videoID}
    controls="controls" 
  />
`}</pre>

Explanation: Parsing your input starts at <pre> in JSX mode. The opening bracket { switches the parser into JavaScript mode to include computed values into the output. Now the backquote ` switches the parser into string-parsing mode. This can span multiple lines. Inside string parsing mode, JSX-special characters <>{} are not special anymore. But you must escape the two characters that are special inside multi-line strings: The back quote ` and the dollar sign $.

After parsing your coding, the final back quote switches back to JavaScript mode, the following } switches back to JSX mode and </pre> completes your element.

React will automatically convert your string into safe HTML.

Answer 2

If you want that code as literal block, you'll need to use JSX-safe characters, so either JSX-escape everything, or use HTML entities where you can and then you still need to JSX-escape the curly brackets (because those are templating syntax in JSX) and newlines (yes, those newlines are not JSX-safe, either. Whitespace is collapsed during JSX transformation).

And you probably want to use a <pre>, which is a block-level element for formatted text, rather than <code>, which is inline:

<pre>
  &lt;VideoPlayer{'\n'}
    ref="videoplayer"{'\n'}
    preload={'{'}this.props.preload{'}\n'}
    classes={'{'}this.props.classes{'}\n'}
    videoID={'{'}this.props.videoID{'}\n'}
    controls="controls"{'\n'}
  /&gt;</pre>

"That's so much work O_o", yeah it is. So usually you don't bother doing this yourself; if you use a bundler, you use a preprocessor (like block-loader if you're using webpack), or if you don't you often use a special react component that renders text verbatim.