Set Zustand store value based on input name attribute?

[lkdm]

I want to use a separate dispatch function to set any attribute in my Zustand store, based on the value of the name attribute in an input component.

---

Let's say I have a long form, with this as one of my elements.

<input type="text" name="DataPointA" />

And on blur, I have a set attribute function.

export const setAttribute = (name: string, value: string) =>
    useStore.setState({ name: value })

This function literally tries to set the value of value under my Zustand store's name attribute which doesn't exist.

What I want it to do is to grab the name DataPointA from the input text field, and use that instead.

Is there a way to achieve this?

[dai-shi]

useStore.setState({ [name]: value })?

[lkdm]

@dai-shi Thank you, I thought it would be something like this.

Problem is I'm coming up with this error.

Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'PartialState<FormData, "formInput1", "formInput1", "formInput1", "formInput1">'. Property 'formInput1' is missing in type '{ [x: string]: string; }' but required in type 'Pick<FormData, "formInput1">'.

[dai-shi]

So, it's a type error. How do you define the useStore? It needs to include the signature { [x: string]: string }, or it may not work due to current PartialState impl.

[lkdm]

My Zustand store is as follows.

const useStore = create(set => ({
    // Our Form's Zustand store.
    DataPointA: "test"
  }))

Putting that type signature there seems to fix the issue. I've got some other errors with my code I have to sort out. So I'll let you know once I've solved those whether it worked. Thank you.

const useStore = create<{[x: number]: string}>(set => ({
    // Our Form's Zustand store.
    formInput1: "test"
  }))