I encountered a problem when connecting a bootstrap modal window to react.

When opening a modal window, an error occurs: TypeError: context is undefined

Here is my code:

/* * Рендер самого приложения */ 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

    1 answer 1

    Pass the second text tag to the super class constructor.

     constructor(props, context) { super(props, context); }