How to fix Unexpected token < in visual studio when adding JavaScript code

Question

I have modified the code on this website https://codepen.io/mgmarlow/pen/YwJGRe to have six columns instead of two, when I add the code into Visual Studio I get a syntax error.

I have tried to copy and paste the original JavaScript code from https://codepen.io/mgmarlow/pen/YwJGRe to this JavaScript validation site http://esprima.org/demo/validate.html and it also says syntax error Unexpected token <

It is probably a simple problem, but I am not familiar with JavaScript.

 render () {
return (
  <div className="container">
    <div id="block1" className="container">
      <Card body="Card 3"/>
      <Card body="Card 4"/>
    </div>
        <div id="block2" className="container">
      <Card body="Card 5"/>
      <Card body="Card 6"/>
    </div>            

    <div id="block3" className="container">
      <Card body="Card 1"/>
      <Card body="Card 2"/>
    </div>
    <div id="block4" className="container">
      <Card body="Card 7"/>
      <Card body="Card 8"/>
    </div>
        <div id="block5" className="container">
      <Card body="Card 9"/>
      <Card body="Card 10"/>
    </div>            

    <div id="block6" className="container">
      <Card body="Card 11"/>
      <Card body="Card 12"/>
    </div>
  </div>
    );
  }
}

that's JSX, which is commonly used with React JS - it isn't valid Javascript in itself (hence the syntax error you're seeing), it needs to be compiled into regular JS using tools like Babel. (Which I'm no expert in, so I'll let someone else talk you through the details if you need them.) — Robin Zigmond
– Robin Zigmond, Commented Feb 11, 2019 at 14:01

Soviut · Accepted Answer · 2019-02-11 16:22:49Z

1

This is JSX which is a Javascript templating syntax which compiles to raw Javascript. It is most commonly used in React applications as a way to use HTML-like syntax inside components.

You either need to be running a bundling tool like Webpack to compile the JSX to javascript, or use the raw javascript syntax. Example:

var rootElement =
  React.createElement('div', {}, 
    React.createElement('h1', {}, "Contacts")
  )

ReactDOM.render(rootElement, document.getElementById('react-app'))

answered Feb 11, 2019 at 16:22

Soviut

92.2k53 gold badges210 silver badges285 bronze badges

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

Collectives™ on Stack Overflow

How to fix Unexpected token < in visual studio when adding JavaScript code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related