Error in React CRUD app : TypeError: Cannot destructure property 'id' of 'this.props.event' as it is undefined

Question

I'm working on a simple Laravel and React.js CRUD application and I got this error when I try to show the list of the events : TypeError: Cannot destructure property 'id' of 'this.props.event' as it is undefined.

Here is the code for Event.js :

import React, { Component } from 'react';
import axios from 'axios';

class Event extends Component {  
  render() {
    const { id, eventname, eventdescription } = this.props.event;
    return (
        <tr>
          <td>
            {id}
          </td>
          <td>
            {eventname}
          </td>
          <td>
            {eventdescription}
          </td>

        </tr>
    );
  }
}


export default Event;

And here is the code for the DisplayEvent file :

import React, {Component} from 'react';
import axios from 'axios';
import Event from './Event';
class DisplayEvent extends Component {
  constructor(props) {
       super(props);
       this.state = {value: '', events: ''};
     }
     componentDidMount(){
       axios.get('http://127.0.0.1:8000/api/events')
       .then(response => {
         this.setState({ events: response.data });
       })
       .catch(function (error) {
         console.log(error);
       })
     }



  render(){
    const events = this.props.events;
    return (
      <div>
        <h1>Events</h1>


        <div className="row">
          <div className="col-md-10"></div>
          <div className="col-md-2">

          </div>
        </div><br />


        <table className="table table-hover">
            <thead>
            <tr>
                <td>ID</td>
                <td>Event Name</td>
                <td>Event Description</td>
                <td width="200px">Actions</td>
            </tr>
            </thead>
            <tbody>
              {events.map(event => {
                return(
                  <Event 
                    id={event.id}
                    eventname={event.eventname}
                    eventdescription={event.eventdescription}/>
                )
              })}

            </tbody>
        </table>
    </div>
    )
  }
}
export default DisplayEvent;

Here is my app.js file :

import React from 'react';
import { Component } from 'react';
import axios from 'axios';
import './App.css';
import DisplayEvent from './components/DisplayEvent';
import { render } from '@testing-library/react';
class App extends Component {
  state = {
    events: [],
    loader: false,
    event: {},
    url: "http://127.0.0.1:8000/api/events"
  };
  getEvents = async () => {
    this.setState({ loader: true });
    const events = await axios.get(this.state.url);
    this.setState({ events: events.data, loader: false });
  };
  componentDidMount() {
    this.getEvents();
  };
  render(){
  return (
    <div className="App">
       <DisplayEvent events={this.state.events}/>
    </div>
  );
}
}

export default App;

and this is my index.js file :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.querySelector('#root'));

serviceWorker.unregister();

Answer 1

Instead of using this.props.event try with this.props alone in Event.js

const { id, eventname, eventdescription } = this.props;