zh0nb Posts - Answer Overflow

zh0nb

•Created by zh0nb on 8/20/2023 in #support

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

10 replies

SSolidJS

•Created by zh0nb on 5/6/2023 in #support

onClick event does not get fired

Hi everyone, I'm facing a weird issue where onClick events are not fired if I use them within a For loop. The button that's outside of the for loop (.working-button) is working fine, but the rest are not working at all. This is the component's code (I'm using nanostores since I'm embedding this within an Astro website with client:load). You can see my code here:

// TagFilter.tsx contents
import { useStore } from '@nanostores/solid';
import { filterTags, tags } from '../recipeStore';

import { For } from "solid-js";

export default function TagFilters() {
    const $tags = useStore(tags);
    const $ActiveFilter = useStore(filterTags);

    const highlightedTags = $tags().filter((tag) => {return tag.highligthed});

    const setTagFilter = (tagname: string, event: Event) => {
        console.log('clicked');
        console.log(tagname);
    }

    return (
     <>
        <div class="fixed bottom-0 w-full last:pb-4">
            <div class="filter tags justify-center flex gap-2">
                <button class="working-button bg-amber-300" onClick={[setTagFilter, 'test']}>Clickme</button>
                <For each={highlightedTags}>
                    {(tag) => 
                    <>
                        <button 
                            onClick={([setTagFilter, 'buttonclick'])}
                            class="tagbutton bg-amber-300 text-md hover:ring-amber-500 hover:ring-2 hover:cursor-pointer hover:bg-amber-500 active:bg-amber-500 px-3 py-2 rounded-full"
                        >{tag.name}</button>
                    </>
                    }
                </For>
            </div>
        </div>
     </>   
    )
}

// TagFilter.tsx contents
import { useStore } from '@nanostores/solid';
import { filterTags, tags } from '../recipeStore';

import { For } from "solid-js";

export default function TagFilters() {
    const $tags = useStore(tags);
    const $ActiveFilter = useStore(filterTags);

    const highlightedTags = $tags().filter((tag) => {return tag.highligthed});

    const setTagFilter = (tagname: string, event: Event) => {
        console.log('clicked');
        console.log(tagname);
    }

    return (
     <>
        <div class="fixed bottom-0 w-full last:pb-4">
            <div class="filter tags justify-center flex gap-2">
                <button class="working-button bg-amber-300" onClick={[setTagFilter, 'test']}>Clickme</button>
                <For each={highlightedTags}>
                    {(tag) => 
                    <>
                        <button 
                            onClick={([setTagFilter, 'buttonclick'])}
                            class="tagbutton bg-amber-300 text-md hover:ring-amber-500 hover:ring-2 hover:cursor-pointer hover:bg-amber-500 active:bg-amber-500 px-3 py-2 rounded-full"
                        >{tag.name}</button>
                    </>
                    }
                </For>
            </div>
        </div>
     </>   
    )
}

I hope someone can help me to find out. Thanks in advance!

5 replies

Gaming

Programming