React ES6 + Bootstrap React 模态

从引导程序连接模态窗口以对项目做出反应时遇到问题。

打开模态窗口时，出现错误：TypeError: context is undefined

这是我的代码：

    /*
     * Рендер самого приложения
     */
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          news: my_news,
        }
        this.setAppState = this.setAppState.bind(this);
      }
      setAppState(state) {
        this.setState(state);
      }
      render() {
        return  <div className="App">
                  <Grid>
                    <Header/>
                    <AddNew setAppState={this.setAppState} appState={this.state}/>
                    <Row className="show-grid">
                      <h3>Новости:</h3>
                    </Row>
                    <Row className="show-grid">
                    <News data={this.state.news}/>
                    </Row>
                    <AllNews data={this.state.news}/>
                  </Grid>
                </div>
      }
    }

    /*
     * Регион "Шапка"
     */
    class Header extends Component {
      render() {
        return  <div className="header">
                  <ModalInstance/>
                </div>
      }
    }

    /*
     * Регион "Подвал"
     */
    class Footer extends Component {
      render() {
        return  <div className="footer">
                  <p>Подвал</p>
                </div>
      }
    }

    /*
     * Блок с количеством новостей
     */
    class AllNews extends Component {
      render() {
        const all_count = this.props.data.length;
        return  <div className="AllNews">
                  <p>Всего новостей: {all_count}</p>
                </div>
      }
    }

    /*
     * Полный список новостей
     */
    class News extends Component {
      render() {
        const all_news = this.props.data;
        const items_news = this.props.data.map(function(item, index) {
          return (
            <Col sx={12} sm={6} md={4} key={index}>
              <div className="news__item">
                <p className="news__author"><a href={"/news/"+item.id}>{item.author}</a>:</p>
                <p className="news__text">{item.text}</p>
              </div>
            </Col>
          )
        });

        if (all_news.length > 0) {
          return items_news;
        } else {
          return  <div className="message">
                    <p>К сожалению новостей нет</p>
                  </div>
        }
      }
    }

    /*
     * Форма добавления новости
     */
    class AddNew extends Component {
      constructor(props) {
        super(props);
        this.addNew = this.addNew.bind(this);
      }
      addNew() {
        //var author = ReactDOM.findDOMNode(this.refs.titleNew).value;
        //var text =   ReactDOM.findDOMNode(this.refs.descriptionNew).value;

        let newState = {
          ...this.props.appState
        }
        newState.news.push({
          id: newState.news.length+1,
          author: '111111111',
          text: '2222222222'
        });
        this.props.setAppState({
          ...this.props.appState,
          news: newState.news
        })
      }
      render() {
          return  <form>
                    <FieldGroup
                      id="titleNew"
                      key="titleNew"
                      ref='titleNew'
                      type="text"
                      label="Заголовок"
                      placeholder="Введите текст"
                    />
                    <FieldGroup
                      id="descriptionNew"
                      key="descriptionNew"
                      ref='descriptionNew'
                      type="text"
                      label="Описание"
                      placeholder="Введите текст"
                    />
                    <Button onClick={this.addNew}>
                      Добавить новость
                    </Button>
                  </form>
      }
    }

    /*
     * Модальное окно для добавления новости
     */
    class ModalInstance extends Component {
      constructor(props) {
        super(props);
        this.state = { showModal: false };
        this.close = this.close.bind(this);
        this.open = this.open.bind(this);
      }

      close() {
        this.setState({ showModal: false });
      }

      open() {
        this.cpntext = 1;
        this.setState({ showModal: true });
      }

      render() {
        const popover = (
          <Popover id="modal-popover" title="popover">
            very popover. such engagement
          </Popover>
        );
        const tooltip = (
          <Tooltip id="modal-tooltip">
            wow.
          </Tooltip>
        );

        return  <div>
                  <Button
                    bsStyle="primary"
                    bsSize="large"
                    onClick={this.open}
                  >
                    Добавить новость
                  </Button>

                  <Modal show={this.state.showModal} onHide={this.close}>
                    <Modal.Header closeButton>
                      <Modal.Title>Добавление новости</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                      <h4>Содержимое модалки</h4>
                    </Modal.Body>
                    <Modal.Footer>
                      <Button onClick={this.close}>Закрыть</Button>
                    </Modal.Footer>
                  </Modal>
                </div>
      }
    }

    function FieldGroup({ id, label, help, ...props }) {
      return (
        <FormGroup controlId={id}>
          <ControlLabel>{label}</ControlLabel>
          <FormControl {...props} />
          {help && <HelpBlock>{help}</HelpBlock>}
        </FormGroup>
      );
    }

    export default App