Replacing Array does not update component.

[lkdm]

I am trying to make a form that updates a form component when an error needs to be displayed.

It currently updates the Fields array using the handleSave method. This, however, will not update the child component, which selects the element of the array. Is something wrong with my implementation?

Thank you again for your help :)

form.store.ts

// Zustand Store
export type InputState = {
  value?: string | number | Array<string>;
  error?: Error;
}

interface IFormState {
    fields: Array<InputState>
}

export const useStore = create<IFormState>(() => ({
    fields: []
}))

// Actions

export const getFields = () => useStore.getState()

export const deleteFields = () => useStore.setState({fields: []})

export const replaceFields = (_fields: Array<InputState>) => useStore.setState({fields: _fields})

export const pushFields = (_fields: Array<InputState>) => 
    useStore.setState({fields: [...useStore.getState().fields, ..._fields]})

export const updateFieldValue = (_index: number, _value: string) => {
    // Treats the array as immutable
    const mutate = [...useStore.getState().fields]
    mutate[_index].value = _value
    useStore.setState({fields: mutate})
}

export const updateFieldError = (_index: number, _error: Error) => {
    // Treats the array as immutable
    const mutate = [...useStore.getState().fields]
    mutate[_index].error = _error
    useStore.setState({fields: mutate})
}

textinput.component.tsx

import { useCallback } from 'react'
import shallow from 'zustand/shallow'
import {useStore} from './form.store'

export const LabTextInput = ({...props}) => {
    // Selects the portion of state.
    const { value, error } = useStore(
        useCallback(state => state.fields[props.id], [props.id]),
        shallow
    )

    return (
        <>
            <input
                onBlur={props.handleBlur}
                name={props.name}
                id={props.id}
                defaultValue={value}
                type="text"
            />
            {value !== undefined && value}
            
        </>
    )
}

Form.tsx

import { ReactChild, ReactFragment, ReactPortal, useCallback } from 'react'
import {getFields, pushFields, replaceFields, updateFieldValue, useStore} from './form.store'
import { LabTextInput } from './textinput.component'

const FORM_SCHEMA = [
    {
        name: "text1",
        label: "First Text",
        component: "TEXT"
    },
    {
        name: "text2",
        label: "Second Text",
        component: "TEXT"
    },
]

const REFINED_FORM_SCHEMA = ["text1", "text2"]


export const FormLab = () => {

    pushFields([{value: "test a"}, {value: "test b"}])
    pushFields([{value: "test c"}, {value: "test d"}])

    updateFieldValue(2, "Hello there")

    const handleSave = (name: string, id: number, value: string) => {
        updateFieldValue(id, value)
        console.log(getFields())
    }

     // Tab or click away
    const handleBlur = (event: any) =>
        handleSave(event.target.name, event.target.id, event.target.value);

    updateFieldValue(0, "Updated value")

    return (
        <form>
            <LabTextInput
                id="0"
                key="0"
                name="text1"
                handleBlur={(e: any) =>handleBlur(e)}
            />
            <LabTextInput
                id="1"
                key="1"
                name="text2"
                handleBlur={(e: any) =>handleBlur(e)}
            />
            <LabTextInput
                id="2"
                key="2"
                name="text2"
                handleBlur={(e: any) =>handleBlur(e)}
            />
          
        </form>
    )
}

[lkdm]

Solved!

The solution is to only select ONE attribute at a time (not value and error). In fact, selecting value isn't even necessary for most/all inputs.

const error = useStore(useCallback(state => state.fields[props.id].error, [props.id]), shallow)

I would still appreciate any input if anyone has suggestions on how to improve the code.