CODEWITHSUNDEEP
javascriptreactjs
GWorking
GWorking

Reputation: 4341

javascript (ReactJS), how to execute a reference of a function

If I have a function that I want to use in a onClick, such as this

*using ReactJS and Semantic-UI

<Table.HeaderCell
  onClick={this.handleSort(items)}
>

where the function returns a reference of a function, such as this

handleSort = (items) => () => {
    console.log('now')
}

then, how can I execute this function outside of the onClick event? What doesn't work:

componentDidMount() {
    this.handleSort.call(items);
    this.handleSort(items);
}

Upvotes: 1

Views: 44

Answers (2)

Lucas Ricoy
Lucas Ricoy

Reputation: 163

I guess you are trying to execute the inner function that logs 'now' to the console.

As a clarification: this.handleSort(items) returns a anonymous function: () => { console.log('now') }

In order to call it, you may do: this.handleSort(items)() to immediately invoke the inner function.

See:

var handleSort = (items) => () => {
  console.log('now')
}

// holds the inner function part
var innerFunction = handleSort([]);
console.log(innerFunction.toString());

// Equivalent ways to call it directly
innerFunction();
handleSort([])();

Upvotes: 0

steadweb
steadweb

Reputation: 16541

handleSort returns a function, you'll need to invoke it with (), like so:

componentDidMount() {
    this.handleSort(items)();
}

Upvotes: 2

Related Questions