Syntax error rendering JavaScript as text in React

Question

I'm writing some documentation in React and getting a syntax error when I try to write JavaScript within the render function. I'm not sure if this is a security issue with a workaround or if it's actually a parser issue:

export default class Docs extends Component {
  render = () =>
    <div>
      <h1>Example:</h1>
      <div className={styles['code-block']}>
        `
        import Calendar from './Calendar'

        const config = {
          api_key: 1234,
          calendars: [{ name: 'demo', url: '[email protected]' }]
        }
        `
      </div>
    </div>
 }

I've tried both with the back tick and without but still get the same syntax error:

Module build failed: Syntax Error: Unexpected token, expected }

referencing the colon just after api_key. Is there a way to do this, or am I better off taking a different approach.

try wrapping it with {``}, right now the parser is confused at what should be escaped to actual JS and what is a string in JSX — rlemon
– rlemon, Commented Oct 30, 2018 at 17:14
@rlemon do I have to worry about the parser parsing it as JS? — crash springfield
– crash springfield, Commented Oct 30, 2018 at 17:16
no, that's what the template literal is doing. making it a string. but without telling the parser to treat that like JS, it's just arbitrary backticks. just don't include any ${} wrapped stuff in there. or escape it within the string. — rlemon
– rlemon, Commented Oct 30, 2018 at 17:18

MBehtemam · Accepted Answer · 2018-10-30 17:15:28Z

2

    export default class Docs extends Component {
  render = () =>
    <div>
      <h1>Example:</h1>
      <div className={styles['code-block']}>
        {`
        import Calendar from './Calendar'

        const config = {
          api_key: 1234,
          calendars: [{ name: 'demo', url: '[email protected]' }]
        }
        `}
      </div>
    </div>

}

answered Oct 30, 2018 at 17:15

MBehtemam

7,92917 gold badges68 silver badges111 bronze badges

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

Comments

Ted · Accepted Answer · 2018-10-30 17:15:36Z

2

You simply need to wrap it in brackets:

{`
  import Calendar from './Calendar'

  const config = {
    api_key: 1234,
    calendars: [{ name: 'demo', url: '[email protected]' }]
  }
`}

answered Oct 30, 2018 at 17:15

Ted

14.9k2 gold badges43 silver badges58 bronze badges

Comments

AmerllicA · Accepted Answer · 2018-10-30 17:23:26Z

1

the backquote (`) operator is not text or string, it is an operator, like a JavaScript function. A JavaScript function must be inside {} when used inside JSX. so you should write like below:

export default class Docs extends Component {
  render = () =>
    <div>
      <h1>Example:</h1>
      <div className={styles['code-block']}>
        {`
        import Calendar from './Calendar'

        const config = {
          api_key: 1234,
          calendars: [{ name: 'demo', url: '[email protected]' }]
        }
        `}
      </div>
    </div>
 }

answered Oct 30, 2018 at 17:23

AmerllicA

33.2k18 gold badges146 silver badges170 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2018-10-30 17:37:48Z

Multiline code should be wrapped in parentheses and using non other than html markup, you'll need to use curly bracket to parse them:

export default class Docs extends Component {
  render = () => ( {/* 1 */}
    <div>
      <h1>Example:</h1>
      <div className={styles['code-block']}>
       { {/* 2 */}
        `
        import Calendar from './Calendar'

        const config = {
          api_key: 1234,
          calendars: [{ name: 'demo', url: '[email protected]' }]
        }
        `
       }
      </div>
    </div>
   )
 }

{/* 1 */}

Instead of using parentheses you may also use curly brace and use return statement like:

  render = () => {
    return ( <div> {/* optional parentheses */}
     Optional, since it is in same line as return line
    </div>)
  }

Or, like:

  render = () => {
    return (  {/* required parentheses */}
      <div>
       Required, since it is in different line from return line
    </div>
   )
  }

it meant to be starting html markup like <div> in the preceding example.

{/* 2 */}

Using curly brace in the preceding example will result as it is since everything is wrapped in template literal or inside a string. Note that if you use variable like ${some_var} inside the template literal, then it will result its value not as it is. If you want in some case, then just escape the curly brace like $\{some_var}

Collectives™ on Stack Overflow

Syntax error rendering JavaScript as text in React

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related