title: Id not passing in a modal component of React
body: <p>I have a CRUD application that has everything working except for the delete button in the modal popup. In the app, when you hit delete, a modal pops up (which is happening successfully) and when you it delete in the modal view, it throws the following error:</p>
  
  <pre><code>Can not read property '_id' of undefined:
  at ModalItem.handleSubmit
  </code></pre>
  
  <p>Here are my code:</p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  import PropTypes from 'prop-types';
  import {Modal, Button} from 'react-bootstrap';
  
   import Item Service from './ItemService';
      class Modaltem extends React.Component {
        constructor(props) {
          super(props);
          this.addItemService = new ItemService();
          this.handleSubmit = this.handleSubmit.bind(this);
        }
  
        handleSubmit(event) {  //this is showing error at the curly bracket. unexpected token. not sure whats wrong here
          event.preventDefault();
          this.addItemService.deleteData(this.props.obj._id);
        }
        render() {
          // Render nothing if the "show" prop is false
          if (!this.props.show) {
            return null;
          }
          else {
            return (
              &lt;div className="static-modal"&gt;
                &lt;Modal.Dialog&gt;
                  &lt;Modal.Header&gt;
                    &lt;Modal.Title&gt;Ready to Delete Student&lt;/Modal.Title&gt;
                  &lt;/Modal.Header&gt;
  
                  &lt;Modal.Body&gt;Are you sure you want to delete this Student?&lt;/Modal.Body&gt;
  
                  &lt;Modal.Footer&gt;
                    &lt;Button onClick={this.props.onClose}&gt;Close&lt;/Button&gt;
                    &lt;form onSubmit={this.handleSubmit}&gt;
                      &lt;input type="submit" value="Delete" className="btn btn-danger" /&gt;
                    &lt;/form&gt;
  
                  &lt;/Modal.Footer&gt;
                &lt;/Modal.Dialog&gt;
              &lt;/div&gt;
            );
          }
        }
      }
      }
  
      export default ModalItem;
  </code></pre>
  
  <p>Here is my Tablerow.js</p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  import ModalItem from './ModalItem;
  
  import Item Service from './ItemService';
  
  class TableRow extends Component {
  
    constructor(props) {
        super(props);
        this.addItemService = new ItemService();
        this.state = {isOpen: false}; 
    }
  
    toggleModal = () =&gt; {
      this.setState({
        isOpen: !this.state.isOpen
      });
    }
  
  
    render() {
      return (
          &lt;tr&gt;
            &lt;td&gt;
              {this.props.obj._id}
            &lt;/td&gt;
            &lt;td&gt;
              {this.props.obj.item}
            &lt;/td&gt;
            &lt;td&gt;
            &lt;Link to={"/edit/"+this.props.obj._id} className="btn btn-primary"&gt;Edit&lt;/Link&gt;
          &lt;/td&gt;
            &lt;td&gt;
            &lt;button onClick={this.toggleModal}&gt;
              Delete
            &lt;/button&gt;
              &lt;ModalItem
                show={this.state.isOpen}
                onClose={this.toggleModal}&gt;
              &lt;/ModalItem&gt;
  
            &lt;/td&gt;
          &lt;/tr&gt;
      );
    }
  }
  
  export default TableRow;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import App from './App';
  import AddItem from './components/AddItem';
  import IndexItem from './components/IndexItem';
  import EditItem from './components/EditItem';
  
  ReactDOM.render(
    &lt;Router&gt;
        &lt;div&gt;
          &lt;Route exact path='/' component={App} /&gt;
          &lt;Route path='/add-item' component={AddItem} /&gt;
          &lt;Route path='/index' component={IndexItem} /&gt;
          &lt;Route path='/edit/:id' component={EditItem} /&gt;
        &lt;/div&gt;
    &lt;/Router&gt;,
    document.getElementById('root')
  );
  </code></pre>