Модальное окно в React не работает. Отображение ошибок

Здравствуйте, я создавал простое приложение CRUD, и все работало нормально. Первоначально, когда вы хотели удалить что-то из этого списка, вы нажимали кнопку «Удалить», и он удалял этот элемент. Затем я решил реализовать модальную функцию для кнопки удаления, что означало перемещение и добавление кода. Вот тогда у меня много проблем. Я установил response-bootstrap с помощью npm. Я привел свой код ниже. Я создал новый компонент ModalItem и удалил функцию handlsubmit из компонента TableRow и вместо этого поместил ее в модальный компонент. В компоненте TableRow, где изначально была функция handlesubmit, я поместил функцию if / else show и функцию toggleModal и изменил кнопку удаления, чтобы иметь модальную модальную функциональность вместо передачи на внутренний сервер (который теперь обрабатывается командой удаления в модальном окне. Код сейчас не работает. Плюс код VS сообщает, что по какой-то причине у меня есть ошибки в операторе экспорта ModalItem по умолчанию. Пожалуйста, помогите.

ModalItem.js
import React from 'react';
import {Link} from 'react-router-dom';
import PropTypes from 'prop-types';
import ItemService from './ItemService';

class ModalItem extends Component {
    constructor(props) {
        super(props);
        this.addItemService = new ItemService();
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    render() {
    // Render nothing if the "show" prop is false
        if (!this.props.show) {
            return null;
    }

    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);
    }

    return(
    <div className = "static-modal">
        <Modal.Dialog>
            <Modal.Header>
                <Modal.Title>Ready to Delete Student</Modal.Title>
            </Modal.Header>

                <Modal.Body>Are you sure you want to delete this Student?</Modal.Body>

                <Modal.Footer>
                    <Button onClick = {this.props.onClose}>Close</Button>
                    <form onSubmit = {this.handleSubmit}>
                        <input type = "submit" value = "Delete" className = "btn btn-danger"/>
                    </form>

                </Modal.Footer>
        </Modal.Dialog>
    </div>
    ); 
}

export default ModalItem; //showing error

TableRow.js

class TableRow extends Component {

  constructor(props) {
      super(props);
      this.addItemService = new ItemService();
      this.state = {isOpen: false}; 
  }

  toggleModal = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }


  render() {
    return (
        <tr>
          <td>
            {this.props.obj._id}
          </td>
          <td>
            {this.props.obj.item}
          </td>
          <td>
          <Link to = {"/edit/"+this.props.obj._id} className = "btn btn-primary">Edit</Link>
        </td>
          <td>
          <button onClick = {this.toggleModal}>
            Delete
          </button>
          <div>
            <Modal show = {this.state.isOpen}
            onClose = {this.toggleModal}>
            </Modal>
          </div>
          </td>
        </tr>
    );
  }
}

export default TableRow;

index.js

import App from './App';
import AddItem from './components/AddItem';
import IndexItem from './components/IndexItem';
import EditItem from './components/EditItem';

ReactDOM.render(
  <Router>
      <div>
        <Route exact path='/' component = {App} />
        <Route path='/add-item' component = {AddItem} />
        <Route path='/index' component = {IndexItem} />
        <Route path='/edit/:id' component = {EditItem} />
      </div>
  </Router>,
  document.getElementById('root')
);

Код серверной части ItemRoutes.js

var express = require('express');
var app = express();
var itemRouter = express.Router();

// Require Item model in our routes module
var Item = require('../models/Item');

// Defined store route
itemRouter.route('/add/post').post(function (req, res) {
 var item = new Item(req.body);
      item.save()
    .then(item => {
    res.status(200).json({Item: 'Item added successfully'});
    })
    .catch(err => {
    res.status(400).send("unable to save to database");
    });
});

// Defined get data(index or listing) route
itemRouter.route('/').get(function (req, res) {
  Item.find(function (err, itms){
    if (err){
      console.info(err);
    }
    else {
      res.json(itms);
    }
  });
});

// Defined edit route
itemRouter.route('/edit/:id').get(function (req, res) {
  var id = req.params.id;
  Item.findById(id, function (err, item){
      res.json(item);
  });
});

//  Defined update route
itemRouter.route('/update/:id').post(function (req, res) {
  Item.findById(req.params.id, function(err, item) {
    if (!item)
      return next(new Error('Could not load Document'));
    else {
      // do your updates here
      item.item = req.body.item;

      item.save().then(item => {
          res.json('Update complete');
      })
      .catch(err => {
            res.status(400).send("unable to update the database");
      });
    }
  });
});

// Defined delete | remove | destroy route
itemRouter.route('/delete/:id').get(function (req, res) {
  Item.findByIdAndRemove({_id: req.params.id},
       function(err, item){
        if (err) res.json(err);
        else res.json('Successfully removed');
    });
});

module.exports = itemRouter;

Пожалуйста, помогите мне исправить мои ошибки в modalItem.js и TableRow.js, потому что именно здесь я внес все изменения, чтобы включить этот модальный элемент (который теперь вызывает проблемы)