Using For in combination with createStore array of arrays property
Hello all. I've run into an issue with regards to using a store which contains a property that's an array of string arrays. The issue is that it rerenders all the JSX that's in the For callback for that index. It kinda looks like the following:
const [store, setStore] = createStore({ synonyms: [['test_1', 'test_2'], ['test_3', 'test_4']], ...other_properties });
const onChange = (value: any, index: number) => {
setStore('synonyms', index, value);
}
<For each={store.synonyms}>
{(item, index) => (
// Everything in here gets rerendered everytime onChange is triggered.
<>
<OtherComponent />
<Select name={
synonyms.${index()}} options={options} multiple onChange={(value) => onChange(value, index())} />
<OtherComponent />
</>
)}
</For>
I hope someone knows what I can do to solve this issue.13 Replies
this seems expected, since you're changing the item it will recreate everything for that item
it sounds like you want
Index instead?Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
@otonashi9 I wouldn't expect it since only the data of i.e. index 0 changes, not index 0 itself.
I thought using an array of just strings worked, but now in the playground it seems that it doesn't work either. Whenever I type, the JSX gets recreated so I lose focus.
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
yes so you want to use Index then
@otonashi9 I don't want Index because the array can change length
I want to create a Formik kind of thing with FieldArray, so being able to dynamically add fields and arrays
I thought Index should only be used when the array indexes can't be altered. But it will be possible to remove indexes, and push to the array.
not at all
Index is what you want, i.e. only recreate when the index changes (so only when the length changes)
For recreates when the data changes
or more practically it tries to keep things the same but shuffle their positions whereas with Index you would need to update the contents
Ah, then my understanding of Index was wrong. I see that changing it works. I'm gonna check if I run into any other problems when using Index. If not this issue is resolved. Thanks for your help @otonashi9
i thought you meant
every row by everything 😅@mdynnl Oh no, only the row the change affects. Sorry for the confusion.
also i'm not sure
event.target.value contains what you think it does, so you should probably look into thatYeah I saw that it didn't quite work in the example. I've set it up differently locally that it does work, but that involved a larger component which wasn't necessary for the example.
I've taken a look at index and it seems to work as expected. Thanks a bunch!