SolidJS•16mo ago

Array of components gets re-render every time that a new component is added

Hi, I'm struggling to allow users to add new inputs "on-the-fly" without forcing all elements to re-render (and therefore, losing their internal state). Not sure what I'm doing wrong, see the relevant part of my code below:

export default function RecipeForm() {
  const referenceForm = () => (
    <div class="mb-2">
      <FormInput
        type="text"
        name="references[]"
        label="Reference"
        autocomplete="off"
        required={false}
      />
    </div>
  );

  // References
  const [references, setReferences] = createSignal<Component[]>([]);
  // Add initial element
  setReferences(new Array(1).fill(referenceForm));

  const increaseNumberOfReferences: JSX.EventHandler<
    HTMLButtonElement,
    MouseEvent
> = (e): void => {
    e.preventDefault();
    setReferences([...references(), referenceForm]);
  };


  return (
    <>
    <Index each={references()}>
      {(reference, index) => <>{reference}</>}
    </Index>
    <button
      class="btn btn-accent"
      onClick={increaseNumberOfReferences}
    > 
      Add new recipe
    </button>
    </>
  )
}

export default function RecipeForm() {
  const referenceForm = () => (
    <div class="mb-2">
      <FormInput
        type="text"
        name="references[]"
        label="Reference"
        autocomplete="off"
        required={false}
      />
    </div>
  );

  // References
  const [references, setReferences] = createSignal<Component[]>([]);
  // Add initial element
  setReferences(new Array(1).fill(referenceForm));

  const increaseNumberOfReferences: JSX.EventHandler<
    HTMLButtonElement,
    MouseEvent
> = (e): void => {
    e.preventDefault();
    setReferences([...references(), referenceForm]);
  };


  return (
    <>
    <Index each={references()}>
      {(reference, index) => <>{reference}</>}
    </Index>
    <button
      class="btn btn-accent"
      onClick={increaseNumberOfReferences}
    > 
      Add new recipe
    </button>
    </>
  )
}

any idea on how I could keep the state for the elements that didn't change? For now I'm just adding new elements into the array, but the idea is that I also allow removing them

7 Replies

Nathan•16mo ago

I'm not sure this is the problem, but the item in Index is a signal, so I think that the <>{reference}<> in your Index child should be <>{reference()}<>.

zh0nbOP•16mo ago

mm I don't think this is the issue, references is the signal, not reference, right? The main issues is that when a new element is added all of the components in the array get re-(generated/rendered), but I am not sure how to get past that and only re-render elements when they actually change, not when a new element is added

Nathan•16mo ago

reference is a signal and index is fixed. With For, it's the other way around.

Nathan•16mo ago

https://www.solidjs.com/tutorial/flow_index

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

zh0nbOP•16mo ago

you're totally right, completely missunderstood how it worked, will give it a go, thanks!

Nathan•16mo ago

You also might try using For instead of Index. Though thh I don't really grok the difference between the two.

zh0nbOP•16mo ago

yep, my loop was before with a For, but I've changed to Index hoping that would help 😦 ahhh, I see, completely missed that, thank you!!!

Gaming

Programming

Array of components gets re-render every time that a new component is added