Invoking context function not working in React

Viewed 1242

I am trying to update the state of a context from a child Component but the context function is not being invoked.

To set the scene. Here is some example snippet data passed to handleModal in Dashboard.jsx

{
_id: "123", 
name: "test name", 
details: test details, 
content: "test content"
}


SnippetContext.js

The handleSnippetUpdate function should be getting invoked from within Dashboard.jsx. It is not.

  state = {
    name: '',
    details: '',
    content: '',
  }

  handleSnippetUpdate = edit => event => {
    console.log('invoked') //does not get invoked
    this.setState({
      name: edit.name,
      details: edit.details,
      content: edit.content,
    })
  }


Dashboard.jsx

Button invokes handleModal and passes in the snippet data.

<button type="button" onClick={() => this.handleModal(snippet)}>Edit</button>

  handleModal = snippet => {
    console.log(snippet) //snippet data correctly arrives in the function

    this.context.handleSnippetUpdate(snippet) 
    //DOES NOT WORK - need to know why and/or how to do correctly
    //should pass snippet data to handleSnippetUpdate function



    this.showModal.current.showModal() 
    //IGNORE - Runs a function in modal component which sets its state to true

  }
1 Answers

Removing event => from handleSnippetUpdate has fixed the issue. As pointed out by HMR and trixn in the comments.

 handleSnippetUpdate = edit => event => {
    console.log('invoked') //does not get invoked
    this.setState({
      name: edit.name,
      details: edit.details,
      content: edit.content,
    })
  }
Related