React Bootstrap Modal

Question

I am a beginner in React and I was trying to add the bootstrap modal code to my project to see if it is working or not. However, I am always getting some error in this.

I copy pasted the code from https://react-bootstrap.github.io/components/modal/ (Vertically centered) and converted the function to a class.

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Button from 'react-bootstrap/Button'
import 'bootstrap/dist/css/bootstrap.min.css';
import './Mypage.scss'
import Modal from 'react-bootstrap/Button'
import MyVerticallyCenteredModal from './MyVerticallyCenteredModal'


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {modalShow : false};
    this.handleClick = this.handleClick.bind(this);
  }

async handleClick(e) {
    this.setState({modalShow : true});
    const url = 'http://54.233.24.23/test'
    //const data = {username:this.state.userName, password:this.state.password, action:this.state.act};
    try {
      const response = await fetch(url, 
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        },
      });
      const json = await response.json();
      console.log(json);
    } catch (error) {
      console.error('Error', error);
    }
 }

 handleHide() {
  this.setState({modalShow: false});
 }

render() {
  const mod = this.state.modal;
  return (
    <div className="backg">
      <div className="buttons">
        <Button size="lg" className="button1" variant="outline-dark">Sellers</Button>
        <Button size="lg" onClick={this.handleClick} className="button2" variant="outline-dark">Buyers</Button>
        <MyVerticallyCenteredModal
        show={this.state.modalShow}
        onHide = {this.handleHide}
        />
      </div>
    </div>
  );
}
}

export default App;

MyVerticallyCenteredModal.js

import React from 'react';
import Modal from 'react-bootstrap/Button'
import Button from 'react-bootstrap/Button'

class MyVerticallyCenteredModal extends React.Component {
  constructor(props) {
    super(props);
  }

render() { 
  return (
    <Modal
      {...this.props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Modal heading
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Centered Modal</h4>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
          consectetur ac, vestibulum at eros.
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={this.props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}
}

export default MyVerticallyCenteredModal;

The error I am getting is :

Element 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 it's defined in, or you might have mixed up default and named imports.

Check the render method of MyVerticallyCenteredModal.

Answer 1

import Modal from 'react-bootstrap/Button'

You are importing Modal from /Button. Try this:

import Modal from 'react-bootstrap/Modal'

Or you can use this form:

import { Modal } from 'react-bootstrap';