vik Posts - Answer Overflow

vik

Explore posts from servers

•Created by vik on 10/11/2023 in #support

How to array.filter Signal with array and pass down as Signal

I have a component:

export function ComboBox({
  options,
  selected,
  setSelected,
}

// with 
  createEffect(() =>
    setFilteredOptions(
      options.filter((option) =>
        option.label.toLowerCase().includes(searchTerm().toLowerCase())
      )
    )
  );

// returns combox with div, ul, li...

export function ComboBox({
  options,
  selected,
  setSelected,
}

// with 
  createEffect(() =>
    setFilteredOptions(
      options.filter((option) =>
        option.label.toLowerCase().includes(searchTerm().toLowerCase())
      )
    )
  );

// returns combox with div, ul, li...

That's how I call it

  onMount(async () => {
    const [categories, levels] = await Promise.all([
      getCategories(locale) as Promise<Category[]>,
      getLevels(locale) as Promise<Level[]>,
    ]);

    setData({
      categories,
      levels,
    });
  });

return...
          <ComboBox
              options={categories().filter((c) => !c.parent) || []}
            selected={selectedCategory}
            setSelected={setSelectedCategory}
            placeholder="Select a category"
          />

  onMount(async () => {
    const [categories, levels] = await Promise.all([
      getCategories(locale) as Promise<Category[]>,
      getLevels(locale) as Promise<Level[]>,
    ]);

    setData({
      categories,
      levels,
    });
  });

return...
          <ComboBox
              options={categories().filter((c) => !c.parent) || []}
            selected={selectedCategory}
            setSelected={setSelectedCategory}
            placeholder="Select a category"
          />

This was working with solidstart and routedata/createServerDta$, but now I have to use solidjs. I think it was working, because of ssr I think my Combox createEffect is never been called because options that I hand over is not a Signal anymore. So what would be an optimal strategy?

16 replies

SSolidJS

•Created by vik on 9/8/2023 in #support

Update searchParams with useNavigate

I have a couple of tables. I can select rows of the table and add my rowId's to queryValue here is a simplified version of my code

const navigate = useNavigate();

 createEffect(() => {

    navigate("/?query=" + selectedIds().join("|"), { resolve: false });
})

const navigate = useNavigate();

 createEffect(() => {

    navigate("/?query=" + selectedIds().join("|"), { resolve: false });
})

This works fine so fare. Better than with searchParams. With searchParams I had the problem, that the value was URLencoded, but I want to keep | And useNavigate allows me push the changes to browsers history. Problem: everytime I select a row, or evertime that Effect is triggred, the browser jumps to the top. I don't want navigate to reload. So a mix of searchParams and navigate would be good?

3 replies

Gaming

Programming