SolidJS•15mo ago

Eslint, am I doing something wrong?

const ToggleButton: Component<Props> = (props) => {
  const [local, others] = splitProps(props, ["toggled"]);
  const [toggle, setToggle] = createSignal(local.toggled);

  return (
    <button onClick={props.onClick}>
      <CustomButton
        classChange={
          toggle() ? `bg-blue-800 hover:bg-blue-900 active:bg-blue-900` : null
        }
        onClick={() => {
          setToggle(toggle() ? setToggle(false) : setToggle(true));
        }}
      >
        {props.children}
      </CustomButton>
    </button>
  );
};

const ToggleButton: Component<Props> = (props) => {
  const [local, others] = splitProps(props, ["toggled"]);
  const [toggle, setToggle] = createSignal(local.toggled);

  return (
    <button onClick={props.onClick}>
      <CustomButton
        classChange={
          toggle() ? `bg-blue-800 hover:bg-blue-900 active:bg-blue-900` : null
        }
        onClick={() => {
          setToggle(toggle() ? setToggle(false) : setToggle(true));
        }}
      >
        {props.children}
      </CustomButton>
    </button>
  );
};

So eslint complains about couple of things: 1.

 createSignal(local.toggled)

 createSignal(local.toggled)

, docs say something about putting initial, but is it only to avoid eslint warning? I mean I think my code works robustly. 2.

 <button onClick={props.onClick}>

 <button onClick={props.onClick}>

also complains, about reactive context but if I put it like docs suggest

<button onClick={(e) => props.onClick(e)}>

<button onClick={(e) => props.onClick(e)}>

, it no longer works and complains about actual error not just a warning. 3.

 onClick={() => {
          setToggle(toggle() ? setToggle(false) : setToggle(true));
        }}

 onClick={() => {
          setToggle(toggle() ? setToggle(false) : setToggle(true));
        }}

This one also seems to work fine but still warns about tracked scope

5 Replies

REEEEE•15mo ago

The last is weird, you're setting the signal inside the signal setter? You can do setToggle(p => !p) or setToggle(!toggle()) For 1, you don't need to put an initial value but if you don't the initial value will be undefined 2 is fine how you wrote it and someone else might be able to tell you what the eslint warning is trying to say. The reason the changed one might not be working is if your props.onClick doesn't take any arguments and you're passing in e, it will error You can omit e and do () => props.onClick() There's a reasoning behind the warning for the second one but I can't remember it off the top of my head. From what I do remember, it's because event handlers are not reactive? I could be wrong about that part

Massukka•15mo ago

last one is my bad, its just plain wrong, I tried () => props.onClick() on the second one but I get this ts error (property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined Cannot invoke an object which is possibly 'undefined'.ts(2722) This expression is not callable. Not all constituents of type 'EventHandlerUnion<HTMLButtonElement, MouseEvent>' are callable. Type 'BoundEventHandler<HTMLButtonElement, MouseEvent>' has no call signatures.ts(2349)

Otonashi•15mo ago

events on native elements are typed to accept both a function and an array form like [handler, arg] where arg will be passed as the first argument so typescript wants you to handle the latter case personally i would ignore the eslint warning which warns assuming that props.onClick is reactive, when it is convention to treat event handlers as not reactive for 1., yes props prefixed with initial are treated as static by the eslint plugin, there is no other effect to naming them differently 3. probably warns because you're reading toggle() outside a tracked scope (or in a context where the plugin can't deduce whether or not it will be called in a tracked scope) since you don't intend to track it you can ignore the warning

Massukka•15mo ago

Alright thanks to you both

Unknown User•15mo ago

Message Not Public

Gaming

Programming

Eslint, am I doing something wrong?