"The reactive variable 'head' should be wrapped in a function for reactivity."

I'm a little confused specifically as to what this warning from eslint-plugin-solid means:

The reactive variable 'head' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props.

The reactive variable 'head' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props.

Here's what the code looks like (simplified):

export const Program = (props) => {
  const { showProgram } = useResult()
  const head = () => props.majors[0]
  return (
    <a onClick={[showProgram, head().program.id]} >
      <span class="i-mdi-eye mr-2 ml-1" />
      Unhide
    </a>
  )
}

export const Program = (props) => {
  const { showProgram } = useResult()
  const head = () => props.majors[0]
  return (
    <a onClick={[showProgram, head().program.id]} >
      <span class="i-mdi-eye mr-2 ml-1" />
      Unhide
    </a>
  )
}

I don't understand here why it's telling me it should be wrapped in a function, when I'm reading a derived state. This works fine it's really a linting warning that I'm not sure is even correct so I'm wondering if I've got this all wrong.

3 Replies

<Alterion.Dev>OP•2y ago

(I have this similar issue other places in the project, interestingly, and this is literally the only linting issue I've yet to solve, the others are pretty clear except for one)

bigmistqke•2y ago

@joshwilsonvu made the plugin i think

Unknown User•2y ago

Message Not Public

Gaming

Programming

"The reactive variable 'head' should be wrapped in a function for reactivity."