SolidJS•3mo ago

&& in <Show> when condition and typescript?

        <Show
                    when={
                        selectedDate() &&
                        firstAndLastDate.data?.firstDate &&
                        firstAndLastDate.data?.lastDate
                    }
                >
                    {colorPicker(
                        selectedDate(), //Possibly null in all three
                        firstAndLastDate.data?.firstDate,
                        firstAndLastDate.data?.lastDate,
                    
                    
                    )}
                </Show>

        <Show
                    when={
                        selectedDate() &&
                        firstAndLastDate.data?.firstDate &&
                        firstAndLastDate.data?.lastDate
                    }
                >
                    {colorPicker(
                        selectedDate(), //Possibly null in all three
                        firstAndLastDate.data?.firstDate,
                        firstAndLastDate.data?.lastDate,
                    
                    
                    )}
                </Show>

Is this possible or do I need three nested show components. I don't think I can use the typical {data => {data()}} format inside show in this case

19 Replies

Eve•3mo ago

I had something similar, and this is what I went with

const [first, setFirst] = createSignal();
const [second, setSecond] = createSignal();
const [third, setThird] = createSignal();
const [ready, setReady] = createSignal(false);

createEffect(() => {
    if (first() && second() && third()) {
        setReady(true);
    }
});

return (
  <Show when={ready()}>
    <div>Ready</div>
  </Show>
);

const [first, setFirst] = createSignal();
const [second, setSecond] = createSignal();
const [third, setThird] = createSignal();
const [ready, setReady] = createSignal(false);

createEffect(() => {
    if (first() && second() && third()) {
        setReady(true);
    }
});

return (
  <Show when={ready()}>
    <div>Ready</div>
  </Show>
);

I'm not sure if the other way would work, but I found this much cleaner to read.

REEEEE•3mo ago

Put selectedDate last And make the other expressions explicit about what you're checking for Then you can use the callback form

Alex Lohr•3mo ago

The problem is that the when prob is expecting a boolean and && will get you the first of its operators that is not falsy, so you are using a date or number here when a boolean is expected. Just wrap it in !!(...).

MassukkaOP•3mo ago

Do you mean like this?

when={!!(
firstAndLastDate.data?.lastDate &&
firstAndLastDate.data?.firstDate &&
selectedDate()
)
}

when={!!(
firstAndLastDate.data?.lastDate &&
firstAndLastDate.data?.firstDate &&
selectedDate()
)
}

Alex Lohr•3mo ago

That should solve the type issue. And use "!" after the signal.

Madaxen86•3mo ago

Or you create a getter or createMemo to narrow the types and use this in the Show instead to get correct narrowed types for all props like this https://playground.solidjs.com/anonymous/05949c3d-6a4b-4686-8d60-64b135bf48ef

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

MassukkaOP•3mo ago

Do you mean using ! When accessing signal to make element inside show parent? Doesn't that remove the benefits of typescript

Alex Lohr•3mo ago

The benefit here is to test something that typescript cannot possibly discern, but you already know is true: that if the condition inside the when-prop is true, the value is present. So it is perfectly OK to use the exclamation mark in that case. Just don't go over board with it.

REEEEE•3mo ago

More like this

when={(
firstAndLastDate.data?.lastDate !== undefined &&
firstAndLastDate.data?.firstDate !== undefined &&
selectedDate()
)
}

when={(
firstAndLastDate.data?.lastDate !== undefined &&
firstAndLastDate.data?.firstDate !== undefined &&
selectedDate()
)
}

Madaxen86•3mo ago

or do this to get type inference correctly:

 const narrow = () => {
    if (firstAndLastDate.data?.firstDate && 
      firstAndLastDate.data?.lastDate && 
      selectedDate()) {
      const { firstDate, lastDate } = firstAndLastDate.data;
      return {
        firstDate,
        lastDate,
        selectedDate:selectedDate()
      };
    }
    return null;
  };
 
  return (

      <Show when={narrow()}>
        {(n) => (
          <>
            <p>first: {n().firstDate}</p>
            <p>last: {n().firstDate}</p>
          </>
        )}
      </Show>

  );

 const narrow = () => {
    if (firstAndLastDate.data?.firstDate && 
      firstAndLastDate.data?.lastDate && 
      selectedDate()) {
      const { firstDate, lastDate } = firstAndLastDate.data;
      return {
        firstDate,
        lastDate,
        selectedDate:selectedDate()
      };
    }
    return null;
  };
 
  return (

      <Show when={narrow()}>
        {(n) => (
          <>
            <p>first: {n().firstDate}</p>
            <p>last: {n().firstDate}</p>
          </>
        )}
      </Show>

  );

Alex Lohr•3mo ago

Is n really an accessor in this case? According to the docs, it isn't.

REEEEE•3mo ago

It is an accessor

Alex Lohr•3mo ago

Then we need to fix https://docs.solidjs.com/reference/components/show It seems you are indeed correct. We need to fix the docs!

Madaxen86•3mo ago

It is an accessor unless you set the keyed prop to true. Then it’s “like” a store. So the docs are correct. The docs only show the keyed case. Maybe it makes sense to add an example with a callback without keyed.

Alex Lohr•3mo ago

I think we should at least add a line to document this behavior.

Alex Lohr•3mo ago

https://github.com/solidjs/solid-docs/pull/922

GitHub

fix: unkeyed show argument by atk · Pull Request #922 · solidjs/sol...

I have read the Contribution guide This PR references an issue (except for typos, broken links, or other minor problems) Description(required) The reference for Show does not document the unkeyed...

Madaxen86•3mo ago

I usually prefer code examples over text. The PR is also adds a second generic for the Show component

Show<T,K>

Show<T,K>

that's unused. I think that should be corrected.

Alex Lohr•3mo ago

Right, I wanted to extend the type to be more precise, that's a leftover.

Alex Lohr•3mo ago

https://github.com/solidjs/solid-docs/pull/924

GitHub

feat: improve show docs by atk · Pull Request #924 · solidjs/solid-...

example for unkeyed show remove stray leftover generic I have read the Contribution guide This PR references an issue (except for typos, broken links, or other minor problems) Description(req...

Gaming

Programming

&& in <Show> when condition and typescript?