React component function on disabled prop never called

Question

I have following problem. I need to disable button and for the disabled prop I pass function to control this behavior. For some reason it is never called. My code is like this :

isValid = () => { 
  //conditions 
}

createNextButton = () => {
  return(
    <button disabled={!this.isValid})>next</button>
  )
}

createBackButton = () => {
  //similar as next button
}

generateButtons = () => (
  <div>
    {this.createBackButton()}
    {this.createNextButton()}
  </div>
)

render() {
  return(
    //something
    <div>
      {this.generateButtons()}
    </div>
)}

This is roughly what the relevant parts of my code look like. Everything is called except the isValid function and I dont know why. Am I missing something?

Answer 1

There are just a few minor syntax errors to resolve this - first, add parenthesis () to this.isValid as shown below to execute isValid as a function (rather than access it as a variable). Also, remove the extra parenthesis ) between the } and > :

createNextButton = () => {
  return(
    <button disabled={!this.isValid()}>next</button>
  )
}