React calling function in component, but function loses definition of this

Question

I have this code and for some reason when toggle gets called console gives undefined for 'this.state.' Not really sure what's going on with it.

// Toggles the modal to open or close depending on current state
  toggle() {
    console.log(this.state);
    this.setState({
      showModal: !this.state.showModal
    });
  };

Down in Render

<Modal isOpen={this.state.showModal} toggle={this.toggle}>
  <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
  <ModalBody>
    Lorem ipsum dolor sit amet
  </ModalBody>
  <ModalFooter>
    <Button color="primary" onClick={this.toggle}>Save</Button>
    <Button color="secondary" onClick={this.toggle}>Cancel</Button>
  </ModalFooter>
</Modal>

there are many, many Stack Overflow questions regarding unexpected behavior inside React event listeners. Have you tried any of the solutions mentioned in any of them, and if not then please add a little more detail to your question as to why they might not apply here. — Dan O, Jan 16 '19 at 18:46

score 0 · Answer 1 · answered Jan 16 '19 at 18:40

that is because, this refers to the callee's scope, hence doesn't refer to the state as you would expect it to. Bind the method to this in the constructor or use an arrow function.

toggle = () => {
  console.log(this.state);
  this.setState({
    showModal: !this.state.showModal
  });
};

score 0 · Answer 2 · answered Jan 16 '19 at 18:41

it's because toggle() has it's own this and therefore doesn't have a state, you can either use an arrow function like :

toggle = () => {
    console.log(this.state);
    this.setState({
      showModal: !this.state.showModal
    });
  };

Or bind it in the constructor

constructor(props){
  super(props);
  this.toggle = this.toggle.bind(this);
}

React calling function in component, but function loses definition of this

2 Answers2