Use or similar tags in ReactJS using JSX

Answer 1

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

, which is a block-level element for formatted text, rather than , which is inline:


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


"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.