noblerare noblerare - 16 days ago 5
React JSX Question

Cannot read property 'X' of undefined - React-bootstrap

I am getting my feet wet in React.js and find it a bit tough with all the syntax and different ways of thinking about stuff. I am trying to create a Modal interface for my webapp and I've done this so far:

MyModal.jsx

import Modal from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import ButtonToolbar from 'react-bootstrap';
import React from 'react';

export default class MyModal extends React.Component {
constructor(props) {
super(props);
this.state = {show: false};
}

showModal() {
this.setState({show: true});
}

hideModal() {
this.setState({show: false});
}

render() {
return (
<ButtonToolbar>
<Button bsStyle="primary" onClick={this.showModal}>
Launch demo modal
</Button>

<Modal
{...this.props}
show={this.state.show}
onHide={this.hideModal}
dialogClassName="custom-modal"
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-lg">Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Wrapped Text</h4>
<p>Blah</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.hideModal}>Close</Button>
</Modal.Footer>
</Modal>
</ButtonToolbar>
);
} // end render function

} // end export default


However, I get the error:

TypeError: Cannot read property 'Header' of undefined
MyModal.render
webpack:///./src/components/MyModal.jsx?:68:37


I'm guessing that it's the
Modal.Header
thing that's causing problems but when I've already imported
Modal
so I assume that imports everything within it. I even tried
import Modal.Header from 'react-bootstrap'
and that line errored out so that's not the way to go.

What is weird is that it's saying the error is on line 68 when
MyModal.jsx
is only 48 lines. In any case, can anyone help me with this?

Answer

Change this:

import Modal from 'react-bootstrap';

to:

import { Modal } from 'react-bootstrap';
Comments