React map an axios array

2.8k views Asked by At

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;
0

There are 0 answers