Odd syntax error in React

Question

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:

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:

Your onEventClick={(target, eventData, day)} => console.log(eventData) line has the closing curly in the wrong place, it should be after the log. That's the only error I can see in this code. — loganfsmyth
– loganfsmyth, Commented Oct 20, 2017 at 6:21
The invariant error is usually caused by trying to render a component that wasn't imported correctly. In this case it looks like the react-event-calendar package you're using is pretty old and doesn't seem to be supported. I would guess your app will work if you remove that component from the render and I'd suggest finding a newer one. — Austin Greco
– Austin Greco, Commented Oct 20, 2017 at 6:45
@AustinGreco - what is told, the event calendar component or the react-babel starter app I started with? Neither seemed that old and had activity recently. I tried changing around the component rendering to no avail. — Mark
– Mark, Commented Oct 20, 2017 at 6:53
@Mark github.com/dptoot/react-event-calendar hasn't been updated in over a year. It looks like they suggest using some other libraries like react-big-calendar or dayz -- when you remove the calendar from the render function does the app work? — Austin Greco
– Austin Greco, Commented Oct 20, 2017 at 7:03

codejockie · Accepted Answer · 2017-10-20 08:14:21Z

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>
    )
  }
}

Collectives™ on Stack Overflow

Odd syntax error in React

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