nullのプロパティ 'setState'を読み取ることができません - React.js、Modal、Bootstrap

Question

私はReact.jsを初めてこのWebアプリケーションを構築しようとしています。私は下に指定された行に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); 
}