Cannot read property 'setState' of null - React.js, Modal, Bootstrap

Question

I am trying React.js for the first time in trying to build this web app. I am getting Cannot read property 'setState' of null on the specified line below. I've been trying to figure out why for the past few hours and cannot seem to figure it out. Any help would be greatly appreciated.

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

yadhu · Accepted Answer · 2016-11-19 15:26:20Z

8

bind your component class methods inside the constructor() (binding inside constructor is better than binding inside render() for performance sake):

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

answered Nov 19, 2016 at 15:26

yadhu

15.6k7 gold badges34 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

noblerare Over a year ago

Oh, nice! I also posted a solution but I liked yours better so I will delete mine.

yadhu Over a year ago

we don't want .bind to create a new function on every render :)

Jared Updike Over a year ago

This totally fixed my problem but a reasonable question is why this boilerplate is necessary in the first place, and why there is no way to automate this with less code written by hand, instead, I would love to have this done for me so I cannot screw it up and leave it out. A real disappointment. Possible answer: is it because constructor() is in the "static" class of my component and not an instance method. Crappy "punish the programmer" API design.

codyc4321 Over a year ago

ty Jared. React has some serious design flaws, not to mention the extreme complexity and learning curve. my friends are finding angular2 to rock

yadhu Over a year ago

this isn't actually a React specific issue. This is how JavaScript works. If you write your classes in es5 (using React.createClass) class methods are automatically bound to the class. React doesn't induce too much learning curve compared to other frameworks as it only represents View in our MVC apps.

Collectives™ on Stack Overflow

Cannot read property 'setState' of null - React.js, Modal, Bootstrap

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related