I keep getting this console error message when rendering my BigCalendar component.
How can I solve this?
"Uncaught Error: NoopWrapper.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. at invariant (invariant.js?994a:42) at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js?8c6a:828) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js?8c6a:359) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js?8c6a:255) at Object.mountComponent (ReactReconciler.js?af94:43) at ReactDOMComponent.mountChildren (ReactMultiChild.js?0c7d:234) at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js?9b5f:701) at ReactDOMComponent.mountComponent (ReactDOMComponent.js?9b5f:520) at Object.mountComponent (ReactReconciler.js?af94:43) at Object.updateChildren (ReactChildReconciler.js?f170:119)"
Here is my code:
import React from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
const localizer = BigCalendar.momentLocalizer(moment);
const MyCalendar = () => {
const dummyEvents = [
{
allDay: true,
end: new Date('October 10, 2018 11:13:00'),
start: new Date('October 09, 2018 11:13:00'),
title: 'hi'
}
];
return (
<div style={{ height: '60rem' }}>
<BigCalendar
events={dummyEvents}
startAccessor="start"
endAccessor="end"
localizer={localizer}
/>
</div>
);
};
export default MyCalendar;
Would be useful if you could specify which version of react-big-calendar
you are using.
Anyway, I'm not sure what is causing the problem, but I also received this error when using version 0.20.1
of react-big-calendar
. A temporary fix might be to downgrade and use for example version 0.19.2
.
Let me know if that helps.