I'm using axios to GET an array of events in react. I then am trying to map through each event from the response. However I keep getting this error:
"invariant.js:38 Uncaught (in promise) Error: Time.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object"
This is my code:
var Events = React.createClass({
getInitialState() {
return {
events: []
}
},
componentDidMount() {
var _this = this;
axios
.get("/URL")
.then(function (response) {
//console.log(response.data)
_this.setState({
events: response.data
});
})
},
componentWillUnmount() {
this.unmounted = true;
},
render() {
//console.log(this.state.events)
return (
<div>
<Link to="/add/" className="btn btn-success pull-right">Add Event <i className="glyphicon glyphicon-plus"></i></Link>
<div className="clearfix"></div>
{this.state.events.map((event, key) => {
return (
<div key={key}>
<Event
title={event.EventTitle}
date={event.EventDate}
time={event.EventTime}
description={event.EventDescription}
presentor={event.EventPresenters}
location={event.EventLocation}
registered={event.registeredusercount}
max_reg={event.EventMaximumAttendees}
id={event.UNID} />
</div>
)
})}
</div>
)
}
});
export default Events;