Cannot read property 'setState' of undefined when submitting form through react-modal

Question

I feel like I am missing something probably pretty silly. I have a modal form pop up if a user wants to change their avatar photo. And the the function is running and updating my database, it just gets messed up when I'm changing the state ... so here is the function to handle the modal submit:

  onModalSubmit: function () {
    let data = new FormData();

    data.append('id', this.state.user._id)
    data.append('image', this.refs.image.files[0])

    axios.patch('/api/userphoto', data, {
      'Content-Type': 'multipart/form-data'
    }).then(function (response) {

      console.log(response);

      window.localStorage.setItem('user', JSON.stringify(response.data.user));

      this.setState({ user: response.data.user, modalIsOpen: false });

    }).catch(function (error) {

      console.log(error);

    })

  }

And here is the modal:

  <Modal
    isOpen={this.state.modalIsOpen}
    onAfterOpen={this.afterOpenModal}
    onRequestClose={this.closeModal}
    style={customStyles}
    contentLabel="Change Photo"
  >

    <h2>Change Photo</h2>
    <div className="field">
      <div className="ui center icon input">
        <input type="file" name="image" ref="image"/>
        <button className="ui button" onClick={this.closeModal}>Cancel</button>
        <button className="ui button" onClick={this.onModalSubmit}>Submit</button>
      </div>
    </div>

  </Modal>

I have tried binding this function inline, and in constructor as well ... but it just tells me another error that it's already bound to component.

Again, the function is working, it just gets hung up on the this.setState after the response from the server.

Any help appreciated, thanks!

what happens if you do var self = this at the top of your function and use self.setState(...) instead? I suspect it may be your usage of the "this" keyword inside of the patch function. — maembe
– maembe, Commented Feb 1, 2017 at 21:26
Oh crazy ... i did put var self = this at the top and that fixes the problem. That is very perplexing though, and I'm still slightly confused by that. I guess it works though. — Taylor King
– Taylor King, Commented Feb 1, 2017 at 21:29
"this" is going to be different based on the scope and context that it's called in. By doing var self = this, you're storing the current "this" in the self variable permanently, so self will always be the this that it was when the function was defined. — maembe
– maembe, Commented Feb 1, 2017 at 21:38
you can also use arrow functions. This will not change the context of the this key word, and ultimately not require var self = this. — Chaim Friedman
– Chaim Friedman, Commented Feb 1, 2017 at 22:08

Community · Accepted Answer · 2017-05-23 12:16:41Z

0

I have tried binding this function inline, and in constructor as well ... but it just tells me another error that it's already bound to component.

You are using the syntax of React.CreateClass factory. I know this from your previous post.

In there you don't need to bind methods. They are already bound.

Check the full answer from here.

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Feb 1, 2017 at 22:25

prosti

46.9k19 gold badges199 silver badges161 bronze badges

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

Collectives™ on Stack Overflow

Cannot read property 'setState' of undefined when submitting form through react-modal

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related