SolidJS•10mo ago

is Index of Store that is array Signal?

I created an array containing several objects based on createStore. When I iterate through this array using a For component and access each object, I don’t need to use a function call to retrieve specific data. This behavior aligns with the documentation. However, when I want to perform actions based on the array’s index (such as deleting the current object), I need to use a function call to correctly obtain the index value. Here’s the code snippet:

    <For each={items}>
              {(item, index) => (
                <div className="container">
                  <div className="level px-6  is-mobile  has-shadow">
                    <div className="level-left">
                      <p>{item.name}-{index}</p>
                    </div>
                    <div className="level-right">
                      <button
                        className="button is-danger is-small"
                        onClick={() => handleDelete(index())}
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                  <hr></hr>
                </div>
              )}
            </For>

    <For each={items}>
              {(item, index) => (
                <div className="container">
                  <div className="level px-6  is-mobile  has-shadow">
                    <div className="level-left">
                      <p>{item.name}-{index}</p>
                    </div>
                    <div className="level-right">
                      <button
                        className="button is-danger is-small"
                        onClick={() => handleDelete(index())}
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                  <hr></hr>
                </div>
              )}
            </For>

is the index a signal? Why I have to access the value via function call in the event of onClick? However, access the value as a property works well in the JSX. Thanks a lot

7 Replies

Prohar 🕉•10mo ago

index is an accessor like a signal so it would be index() not index

hannusOP•10mo ago

but I can access it via index directly as following:

 <p>{item.name}-{index}</p>

 <p>{item.name}-{index}</p>

Prohar 🕉•10mo ago

so you wanna delete it the object? can you show the handle delete function if you dont mind

hannusOP•10mo ago

  const handleDelete = (indexToDelete) => {
    setItems(items.filter((item, index) => index !== indexToDelete));
  };

  const handleDelete = (indexToDelete) => {
    setItems(items.filter((item, index) => index !== indexToDelete));
  };

I do not know the difference between index() and index directly. It both seems work well

skrebbel•10mo ago

Index is indeed an accessor. Thing is, when you delete item 3, then the index of items 4, 5, 6 etc get shifted one down! So the onClick callback needs to be recomputed, or it'd delete the wrong item when you delete 2 items subsequently. The reason you can write {index} instead of {index()} in the JSX is because Solid's JSX compiler is particularly tolerant. It compiles any expression to an a function call, unless it can see that the expression itself is a function call already. For example, <div>{props.foo}</div> gets compiled down to insert(divElement, () => props.foo) (insert is a Solid internal which, in an effect, sets the content of divElement to the result of the expression). Notice how props.foo became () => props.foo. Now, the compiler is simply smart enough to not prefix the () => when it can deduct that foo is itself an accessor. So in your case, {index} gets compiled to index and {index()} would also gets compiled to index. Only the latter will typecheck though, if you use TypeScript. Finally, I believe that Solid will keep calling nested accessors when rendering, until it gets to a value. Try putting {() => () => () => index} in your JSX, it'll still work. So that's why passing index works: it's an accessor, and the JSX compiler lets you render accessors as if they're values.

skrebbel•10mo ago

protip: the "Output" tab on the SolidJS playground (https://playground.solidjs.com) is fantastic for grokking what's going on inside

Solid Playground

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

hannusOP•10mo ago

it is clearer I am going to use function call for keep the consistency. It works well when I change the {index} to {index()} thanks a lot

Gaming

Programming

is Index of Store that is array Signal?