How to write one function for 4 different components?

Question

typescript

Good afternoon!
I use when creating a React application, Material UI. I created a custom component based on a TextField from Material UI. The CustomTextField is used 4 times in the component, so I created 4 handlers that change the state. I don't like that I have 4 identical functions that perform the same action. Please tell me how can I make one function for 4 different CustomTextField. There is a solution using the Switch case. I would like some more options.
PS or is it normal when I have 4 different components, each with its own state and event handler?

const [firstName, setFirstName] = useState<string>('');
  const [lastName, setLastName] = useState<string>('');
  const [dept, setDept] = useState<string>('');
  const [login, setLogin] = useState<string>('');

const onChangeFirstName = (event: React.ChangeEvent<HTMLInputElement>) => {
    setFirstName(event.target.value);
  };
  const onChangeLastName = (event: React.ChangeEvent<HTMLInputElement>) => {
    setLastName(event.target.value);
  };
  const onChangeDept = (event: React.ChangeEvent<HTMLInputElement>) => {
    setDept(event.target.value);
  };
  const onChangeLogin = (event: React.ChangeEvent<HTMLInputElement>) => {
    setLogin(event.target.value);
  };

<CustomTextField
            onChange={onChangeDept}
</CustomTextField>
<CustomTextField
            onChange={onChangeLogin}
</CustomTextField>
<CustomTextField
            onChange={onChangeFirstName}
</CustomTextField>
<CustomTextField
            onChange={onChangeLastName}
</CustomTextField>

Answer 1

interface IFormData {
  firstName: string;
  lastName: string;
}

const [ formData, setFormData ] = React.useState<IFormData>({
  firstName: '',
  lastName: '',
});
  
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => setFormData({
  ...formData,
  [e.target.name]: e.target.value,
});

<CustomTextField name="firstName" value={formData.firstName} onChange={onChange} />
<CustomTextField name="lastName" value={formData.lastName} onChange={onChange} />

How to add two other properties - I think you can guess for yourself.

Answer 2

It's quite normal. Compare code readability with 4 handlers and other options. Why complicate? On js, we seem to be striving for a declarative approach to programming. Smaller code is not equal to optimal code

Answer 3

// хелперы
const makeCustomTextFieldWithState = (): [string, ReactElement] => {
  const [value, setValue] = useState<string>('');
  const onChange = (event: React.ChangeEvent<HTMLInputElement>) =>
    setValue(event.target.value);
  return [value, <CustomTextField onChange={onChange} />];
};

const makeManyCustomTextFieldWithState = (count: number): [string[], ReactElement[]] =>
  Array(count).fill(0).reduce(([values, elements]) => {
    const [value, element] = makeCustomTextFieldWithState();
    return [
      [...values, value],
      [...elements, element],
    ];
  }, [[], []]);

// в компоненте
const [[dept, login, firstName, lastName], elements] = makeManyCustomTextFieldWithState(4);
<>elements</>

Answer 4

I don't like that I have 4 identical functions that perform the same action. Please tell me how can I make one function for 4 different CustomTextField.

Don't complicate.