Бабкины Семечки Comments

Бабкины Семечки

Posts Comments

SSolidJS

•Created by Бабкины Семечки on 11/22/2024 in #support

Reactive conditional rendering based on Store of objects

Thank you for the solution and the detailed explanation 👍

46 replies

SSolidJS

•Created by Бабкины Семечки on 11/22/2024 in #support

Reactive conditional rendering based on Store of objects

The desired behavior doesn't happen. Adding the new applied tag does not update the formatting of of the displayed list

46 replies

SSolidJS

•Created by Бабкины Семечки on 11/22/2024 in #support

Reactive conditional rendering based on Store of objects

Is this what you meant?

46 replies

SSolidJS

•Created by Бабкины Семечки on 11/22/2024 in #support

Reactive conditional rendering based on Store of objects

I dont think i'm following what you're saying. I refactored the above example and it doesn't work:

  const [tags, setTags] = createStore<{
    all: Record<TagId, string>;
    applied: Record<ItemId, Array<TagId>>;
  }>({ all: { 0: "foo", 1: "bar", 2: "baz" }, applied: { 0: [1], 1: [2] } });

  return (
    <>
      <For each={[0, 1]}>
        {(itemId) => {
          return (
            <div>
              <div>Item {itemId}:</div>
              <ul>
                <For each={Object.keys(tags.all)}>
                  {(key) =>
                    tags.applied[itemId as ItemId].includes(Number(key)) ? (
                      <li style={"font-weight: bold;"}>
                        {tags.all[Number(key)]}
                      </li>
                    ) : (
                      <li>{tags.all[Number(key)]}</li>
                    )
                  }
                </For>
              </ul>
              <button
                onClick={() => {
                  setTags("applied", itemId as ItemId, (cur) => [...cur, 0]);
                }}
              >
                Add "foo" tag
              </button>
            </div>
          );
        }}
      </For>
    </>
  );

  const [tags, setTags] = createStore<{
    all: Record<TagId, string>;
    applied: Record<ItemId, Array<TagId>>;
  }>({ all: { 0: "foo", 1: "bar", 2: "baz" }, applied: { 0: [1], 1: [2] } });

  return (
    <>
      <For each={[0, 1]}>
        {(itemId) => {
          return (
            <div>
              <div>Item {itemId}:</div>
              <ul>
                <For each={Object.keys(tags.all)}>
                  {(key) =>
                    tags.applied[itemId as ItemId].includes(Number(key)) ? (
                      <li style={"font-weight: bold;"}>
                        {tags.all[Number(key)]}
                      </li>
                    ) : (
                      <li>{tags.all[Number(key)]}</li>
                    )
                  }
                </For>
              </ul>
              <button
                onClick={() => {
                  setTags("applied", itemId as ItemId, (cur) => [...cur, 0]);
                }}
              >
                Add "foo" tag
              </button>
            </div>
          );
        }}
      </For>
    </>
  );

46 replies

SSolidJS

•Created by Бабкины Семечки on 11/22/2024 in #support

Reactive conditional rendering based on Store of objects

When i change the tags applied to an item, I want the display to update reactively

46 replies

SSolidJS

•Created by Бабкины Семечки on 11/22/2024 in #support

Reactive conditional rendering based on Store of objects

My application works like this: - I send a request to the server for all tags, and put them in a store. - For a given item, I query the server for the tags applied to that item, and put those tags into another store. - I display all tags, with the applied tags highlighted so that the user can see which tags are applied to the item.

46 replies

SSolidJS

•Created by Бабкины Семечки on 11/22/2024 in #support

Reactive conditional rendering based on Store of objects

No, tags are stored on the server. This example is dramatically simplified

46 replies

SSolidJS

•Created by Бабкины Семечки on 11/22/2024 in #support

Reactive conditional rendering based on Store of objects

How do you mean?

46 replies

SSolidJS

•Created by Бабкины Семечки on 11/22/2024 in #support

Reactive conditional rendering based on Store of objects

At least not in a way I can think of. You see, in my actual application, there are many things that take tags, and the tags for each item are stored separately from the main Store of tags.

46 replies

SSolidJS

•Created by Бабкины Семечки on 11/22/2024 in #support

Reactive conditional rendering based on Store of objects

Unfortunately not

46 replies

Gaming

Programming