React modal not displaying

Question

I have attached my main code below. Basically when the page displays and I hit the delete button, no modal pops up. I'm not seeing any compiling error but the dev console shows the following:

Warning:React.createElement: type is invalid--expected a string (for built in components) or a class/function (for composite components) but got undefined. You likely forgot to export your component from the file its defined in. Check your code at ModalItem.js:27, ModalItem.js 26.

Here are my code: ModalItem.js

import React from 'react';
import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
import Item Service from './ItemService';
    class Modal 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 (
            <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 Modal;

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>
            <Modal show={this.state.isOpen}
            onClose={this.toggleModal}>
            </Modal>

          </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')
);

Can you please let me know what I am doing wrong and what this error means?

Answer 1

As pointed out in comments you probably didn't import necessary components:

import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import ItemService from './ItemService';
import { Modal, Button } from 'react-boostrap' // or reactstrap?