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

3 Replies

bigmistqke•2y 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.

GrahfOP•2y ago

Cool. Thanks.

bigmistqke•2y ago

ur welcome!

Gaming

Programming

warnings when passing onClick as prop