#How to update a table of textfields? (stop re-rendering when users type)

9 messages · Page 1 of 1 (latest)

tired shadow
#

So, I essentially have a :

  const [values, setValues] = createSignal<{a: string, b: string}[] | undefined>([]);

  ... 

  return <For each={values()}>{(entry, index) => (
    <div>
      <TextField
        value={entry.a}
        onChange={(e) => {
            const new = [...values()!];
            new[index()] = { ...new[index()], a: e.currentTarget.value };
            setValues(new);
        }}
      />
      <TextField
        value={entry.b}
        onChange={(e) => {
            const new = [...values()!];
            new[index()] = { ...new[index()], b: e.currentTarget.value };
            setValues(new);
        }}
      />
    </div>
  )}</For>

Unfortunately this means every time the user types a letter, the textfield looses focus, as the whole for-array is rerendered.

plush crescent
#

you're recreating the whole array + object, instead just use fine grained updates

setLocalKeys(index(), 'a', e.currentTarget.value)
tired shadow
#

ah, wow, I didn't know createSignal allowed such fine grained editing in case of arrays

tired shadow
plush crescent
#

oh whoops you're using a signal

#

switch to using a store

tired shadow
#

so store behaves much more like the React state , I see

plush crescent
#

hmm not really, signals are closer to react state

#

stores are closer to mobx/valtio