warnings when passing onClick as prop

I get a warning in the child component when I pass an event handler from the parent. In the parent it looks like this:
onSeeAlsoClick={[handleShowSeeAlso, index()]}
onSeeAlsoClick={[handleShowSeeAlso, index()]}
And in the child:
<button
onClick={props.onSeeAlsoClick}
<button
onClick={props.onSeeAlsoClick}
Warning: The reactive variable 'props.onSeeAlsoClick' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props. But when I change it to
<button
onClick={() => props.onSeeAlsoClick()}
<button
onClick={() => props.onSeeAlsoClick()}
it stops working
B
bigmistqke262d ago
Ye, the linter is a bit too aggressive in its language imo and there are a lot of false positives. There is nothing wrong with your code, the only thing is it will not re-run the eventlistener when index() changes, which most likely is not what you want to do anyway.
G
Grahf261d ago
Cool. Thanks.
B
bigmistqke261d ago
ur welcome!