Passing a parameter using JS Use API

[benorosz]

I'm extending the list core component and implementing pagination and filtering via the JS Use API, but I'm having an issue passing values to the JS.

The HTL I have:

<sly data-sly-use.list="...TextList"></sly>
<sly data-sly-use.pagination="${ 'text-list.js' @ listID = list.id, val = 'red' }"></sly>

<div>JS: ${ pagination.listID }</div>
<div>JS: ${ pagination.val }</div>

 And text-list.js:

use( () => {
    return {
        listID: this.listID,
        val: this.val
    }
});

Neither the value passed from Java nor the string will pass through, the rendered HTML I get is

JS:
JS:

From all answers here and on StackOverflow I've seen of using the JS Use API, this syntax should be correct and I should be able to access those parameters just fine.

I know I can access data in JS using data- attributes as well, but I'm pretty sure that that isn't the case with the Use API because it's server-side JS, so I'm not sure how else I would send the data through that I need.

[Mahedi_Sabuj · Accepted solution]

Hi @benorosz, After switching from Arrow function to regular function, the issue was resolved and the code started functioning correctly.

use(function () {
  return {
    listID: this.listID,
    val: this.val
  }
});

[benorosz]

I'm too used to writing JS, I forget this is interpreted differently. That did the trick, thanks!