Access to event target for form inputs

[GilbertQuinn]

Hi team,

Instead of managing state for individual form field value, I have a json document representing the full record I'm working with.
I need a reusable handleChange event for this approach. i.e.

const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

However, no matter how I try, I cannot get access to the target OR even the name property of
It only provides a details object with one property called value.

I want to use it something like this...

<FormField label="Solution Name"> <Input type="text" name="solutionName" value={formData.solutionName} onChange={handleChange}/> </FormField>

My question:

1. Is there a way to access the target so that I can access other properties
2. If not, is there a way to access the name property
3. If still not, what other approach can I take? Keeping state of all the individual form value dies not make sense

Thank you in advance!

[abdhalees]

Hello Gilbert,

is name the only property you need? if yes, you can pass the name in the handler function

const handleChange = (event, name) => {
    setFormData((prev) => ({ ...prev, [name]: value: event.detail.value }));
  };

<FormField label="Solution Name"> <Input type="text" name="solutionName" value={formData.solutionName} onChange={(e) => handleChange(e,"solutionName" )}/> </FormField>