S
SolidJS•15mo ago
zh0nb

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
Nathan•15mo 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()}<>.
zh0nb
zh0nb•15mo 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
Nathan•15mo ago
reference is a signal and index is fixed. With For, it's the other way around.
Nathan
Nathan•15mo ago
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.
zh0nb
zh0nb•15mo ago
you're totally right, completely missunderstood how it worked, will give it a go, thanks!
Nathan
Nathan•15mo ago
You also might try using For instead of Index. Though thh I don't really grok the difference between the two.
zh0nb
zh0nb•15mo 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!!!
Want results from more Discord servers?
Add your server