Render JavaScript inside a <code> tag with JSX

Question

I am using React to render some UI components. I would like to display some JavaScript code inside of <code> tag. I've tried the following:

class A extends React.Component {
    render() {
        return(
            <pre><code>
                (function(a, b) {
                    var s = a.prop;
                    // ...
                }(c, d));
            </code></pre>
        );
    }
}

When I try to compile this script with webpack and Babel, I get an unexpected token error at the line var s = a.prop. How can I properly render this JavaScript?

The above code is written in JSX syntax. What is being returned is a React element. The code to generate the React element is automatically generated by the JSX transpiler. — Max
– Max, Commented May 13, 2016 at 15:39

azium · Accepted Answer · 2016-05-13 16:08:51Z

4

@Pamblam is right, you quite literally need a string:

  render() {
    var foo = `
      (function(a, b) {
        var s = a.prop;
        // ...
      }(c, d));
    `

    return (
      <pre>
        <code>{foo}</code>
      </pre>
    )
  }

fiddle

answered May 13, 2016 at 16:08

azium

20.7k8 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aaron Beall Over a year ago

You can use {` ... `} to escape a multi-line string inside JSX.

azium Over a year ago

@Aaron that's what I tried first and it didn't work. I just went back and tried again and it did. hmm. I thought the IIFE in the string was some edge case for brackets strings in jsx

Collectives™ on Stack Overflow

Render JavaScript inside a <code> tag with JSX

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related