TypeScript error: Type '() => boolean' is not assignable to type 'boolean'

Question

If array of user_list.length == 0, the "clear user" button should be disabled. When I am calling this.disabledButton function, it throws an error saying

Type '() => boolean' is not assignable to type 'boolean'

Below is my logic.

<section>
     <Button
        id='clear-user'
        disabled={this.disabledButton}
        onClick={this.onClearAllUserButton}>
        {'Clear User List'}
     </Button>
</section>

Function defined:

 private disabledButton= (): boolean => {
    if (this.props.user_list.length == 0) {
      return true
    }
    return false
  }

Is my calling wrong?

Answer 1

You're passing a function that returns a boolean (type () => boolean) to a property that expects a boolean (type boolean). You just have to actually execute your function.

disabled={this.disabledButton()}

This error message tells you everything:

"Type '() => boolean' is not assignable to type 'boolean'"

() => boolean is the function you are trying to assign, and boolean is the type it's expecting. It's up to you to notice what those two types are and figure out how to make them match.