Can't apply bootstrap to react (type is invalid) - react-bootstrap

Question

I can't apply Bootstrap to my project.
import {Button, Form, Label, Input, Modal, ModalBody} from 'react-
bootstrap';
In my index.html I have a link to CDN.
I am confused because import worked in very similar project but with another imported components.
My render method
render() {
return (
<div>
...
<Modal name='modal' isOpen={this.state.showModal}>
<ModalBody>
Please add a popup for a location.
<Form name="form">
<Label for="Popup">Popup</Label>
<Input type="text" name="popup" id="popup" placeholder="Popup"/>
<Button bsStyle="primary" type="submit"
onClick={(e)=>this.submit(e)}>Add</Button>
</Form>
</ModalBody></Modal>
</div>
)
}
}
My imports to MapComponent component
import React, {Component} from 'react';
import {Button, Form, Label, Input, Modal, ModalBody} from 'react-
bootstrap';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'
My imports to the App component
import 'babel-polyfill';
import ReactDOM from 'react-dom';
import React from 'react';
import { Router, Route, hashHistory } from 'react-router';
import MapComponent from './MapComponent.jsx';
import styles from '../../css/styles.css';
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 it's defined in, or you might have mixed up default and named imports.
Check the render method of MapComponent.
in MapComponent (created by RouterContext)
in RouterContext (created by Router)
in Router (created by App)
in App

Answer 1

Using CDN link you cannot import modules like,
import {Button, Form, Label, Input, Modal, ModalBody} from 'react-
bootstrap';
You need to install react-bootstrap.
npm install react-bootstrap --save
or
yarn add react-bootstrap
Update
You are importing {Button, Form, Label, Input, Modal, ModalBody} from react-bootstrap but you are using reactstrap code for your modal,
import {Button, Form, Label, Input, Modal, ModalBody} from 'react-bootstrap';
This is code for reactstrap modal
<Modal name='modal' isOpen={this.state.showModal}>
<ModalBody>
Please add a popup for a location.
<Form name="form">
<Label for="Popup">Popup</Label>
<Input type="text" name="popup" id="popup" placeholder="Popup"/>
<Button bsStyle="primary" type="submit"
onClick={(e)=>this.submit(e)}>Add</Button>
</Form>
</ModalBody></Modal>
You can change your import to make your code work
import {Button, Form, Label, Input, Modal, ModalBody} from 'reactstrap';
OR
If you want to use react-bootstrap modal then this is the code for modal
<Modal.Dialog>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Modal body text goes here.</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary">Close</Button>
<Button variant="primary">Save changes</Button>
</Modal.Footer>
</Modal.Dialog>