CODEWITHSUNDEEP
javascriptreactjsbabeljsunexpected-token
Mark
Mark

Reputation: 1872

Odd syntax error in React

So I have custom component with the class App, but still having issues. Am sure it is something easy, but for the likes of me, I am not figuring it out. Basically, my code is:

(app.jsx):

import React from 'react';
import '../styles/index.scss';

const EventCalendar = require('react-event-calendar');

const events = [
    {
        start: '2015-07-20',
        end: '2015-07-02',
        eventClasses: 'optionalEvent',
        title: 'test event',
        description: 'This is a test description of an event',
    },
    {
        start: '2015-07-19',
        end: '2015-07-25',
        title: 'test event',
        description: 'This is a test description of an event',
        data: 'you can add what ever random data you may want to use later',
    },
];

export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>It Works!</h1>
        <p>This React project just works including <span className="redBg">module</span> local styles.</p>
        <p>Enjoy!</p>

                <EventCalendar
                    month={7}
                    year={2017}
                    events={events}
                    onEventClick={(target, eventData, day)} => console.log(eventData)
                    />

      </div>
    )
  }
}

When I run though, I am getting this error:

enter image description here

Can anyone assist in this?

Thanks much.

Update: I fixed the syntax error as suggested and as I am trying to use this to learn something new in react, I am using a sample project of this project, but now get this as shown in screenshot:

enter image description here

Upvotes: 0

Views: 113

Answers (1)

codejockie
codejockie

Reputation: 10844

Webpack build errors can be subtle sometimes:

import React from 'react';
import '../styles/index.scss';

const EventCalendar = require('react-event-calendar');

const events = [
    {
        start: '2015-07-20',
        end: '2015-07-02',
        eventClasses: 'optionalEvent',
        title: 'test event',
        description: 'This is a test description of an event',
    },
    {
        start: '2015-07-19',
        end: '2015-07-25',
        title: 'test event',
        description: 'This is a test description of an event',
        data: 'you can add what ever random data you may want to use later',
    },
];

export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>It Works!</h1>
        <p>This React project just works including <span className="redBg">module</span> local styles.</p>
        <p>Enjoy!</p>

                <EventCalendar
                    month={7}
                    year={2017}
                    events={events}
                    onEventClick={(target, eventData, day) => console.log(eventData)} // the closing curly brace
                    />

      </div>
    )
  }
}

Upvotes: 1

Related Questions