SolidJS•11mo ago

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 🌈•11mo 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.

Grahf•11mo ago

Cool. Thanks.

bigmistqke 🌈•11mo ago

ur welcome!

Gaming

Programming

warnings when passing onClick as prop