CODEWITHSUNDEEP
reactjsbootstrap-modalreact-bootstrap
Yasar Salim
Yasar Salim

Reputation: 69

Cannot read property 'Header' of undefined when using react-bootstrap modal

I'm using react-bootstrap in my project. Getting an error like below while I am using Modal component.

enter image description here

modal component:

<Modal  show={this.state.modalshow} onHide={close}  container={this} aria-labelledby="contained-modal-title">
   <Modal.Header closeButton>
     <Modal.Title id="contained-modal-title">Add User</Modal.Title>
   </Modal.Header>

Upvotes: 5

Views: 5570

Answers (3)

bb14816
bb14816

Reputation: 483

It seems to be not Modal issue. it happened if you are using any undefined value but it doesn't mean that Modal.Header is not undefined. enter image description here enter image description here

Upvotes: 0

yogesh agrawal
yogesh agrawal

Reputation: 726

At First Install React bootstrap with following command -

npm install --save react-bootstrap

After that import Modal from react-bootstrap

import {Button,Modal} from 'react-bootstrap'
<Button bsStyle="primary" type="submit">Create</Button>

if this code works for you i.e. react-bootstrap working fine and try with your modal code will work fine.
else you have a problem with react-bootstrap installation.

Upvotes: 0

Arshpreet Wadehra
Arshpreet Wadehra

Reputation: 1023

Try Adding at Top

import Modal from 'react-bootstrap/lib/Modal';
// or
import { Modal } from 'react-bootstrap';

Upvotes: 2

Related Questions