Невозможно прочитать свойство 'setState' of null - React.js, Modal, Bootstrap

Question

Я пытаюсь React.js в первый раз при попытке создать это веб-приложение. Я получаю Cannot read property 'setState' of null по указанной строке ниже. Я пытался понять, почему последние несколько часов и, похоже, не может понять это. Любая помощь будет принята с благодарностью.

MyModal.jsx

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

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> // Chrome inspector says it errors on this line 
      </Modal> 
     </ButtonToolbar> 
     ); 
    } // end render function 

} // end export default 

Answer 1

связывания ваших методов класса компонентов внутри constructor() (связывание внутри конструктора лучше, чем связывание внутри render() ради производительности):

constructor(props) { 
    super(props); 
    this.state = {show: false}; 
    this.showModal = this.showModal.bind(this); 
    this.hideModal = this.hideModal.bind(this); 
}