React avoid code repetation I was working on a react hooks project.
I was making a form
In the form, I noticed myself writing a very wet code
Here is my code
const FormInvite = (props) =&gt; {
  const [firstName, setFirstName] = useState(&quot;&quot;);
  const [lastName, setLastName] = useState(&quot;&quot;);
  const [country, setCountry] = useState(&quot;&quot;)
  const [email, setEmai] = useState(&quot;&quot;)

  const changeSelectedCountry = (event) =&gt; {
    setCountry(event.target.value)
  }

  const changeFirstName = (event) =&gt; {
    setFirstName(event.target.value)
  }

  const changeLastName = (event) =&gt; {
    setLastName(event.target.value)
  }

  const changeEmail = (event) =&gt; {
    setEmail(event.target.value)
  }

Can someone help me/give recommendation so that I don't write those one liner, kind of representative code?
Given your form fields use appropriate names (i.e. field names match state properties), and you don't mind using a single state object you can create a single change handler that merges in each field update (similar to how a class-based component's this.setState would handle it) using the field name as the key.
const FormInvite = (props) =&gt; {
  const [state, setState] = useState({
    firstName: '',
    lastName: '',
    country: '',
    email: '',
  });

  const changeHandler = e =&gt; {
    const { name, value} = e.target;
    setState(state =&gt; ({ ...state, [name]: value }));
  }
  ...



const rootElement = document.getElementById("root");

const FormInvite = props =&gt; {
  const [state, setState] = React.useState({
    firstName: "",
    lastName: "",
    country: "",
    email: ""
  });

  const changeHandler = e =&gt; {
    const { name, value } = e.target;
    setState(state =&gt; ({ ...state, [name]: value }));
  };

  React.useEffect(() =&gt; {
    console.log('firstname changed', state.firstName);
  }, [state.firstName]);
  React.useEffect(() =&gt; {
    console.log('lastname changed', state.lastName);
  }, [state.lastName]);
  React.useEffect(() =&gt; {
    console.log('country changed', state.country);
  }, [state.country]);
  React.useEffect(() =&gt; {
    console.log('email changed', state.email);
  }, [state.email]);

  return (
    &lt;form&gt;
      &lt;label&gt;
        First
        &lt;input
          type="text"
          value={state.firstName}
          name="firstName"
          onChange={changeHandler}
        /&gt;
      &lt;/label&gt;
      &lt;label&gt;
        Last
        &lt;input
          type="text"
          value={state.lastName}
          name="lastName"
          onChange={changeHandler}
        /&gt;
      &lt;/label&gt;
      &lt;label&gt;
        Country
        &lt;input
          type="text"
          value={state.country}
          name="country"
          onChange={changeHandler}
        /&gt;
      &lt;/label&gt;
      &lt;label&gt;
        email
        &lt;input
          type="email"
          value={state.email}
          name="email"
          onChange={changeHandler}
        /&gt;
      &lt;/label&gt;
    &lt;/form&gt;
  );
};

ReactDOM.render(
  &lt;React.StrictMode&gt;
    &lt;FormInvite /&gt;
  &lt;/React.StrictMode&gt;,
  rootElement
);
input {
  width: 3rem;
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"&gt;&lt;/script&gt;

&lt;body&gt;
  &lt;div id="root"&gt;&lt;/div&gt;
&lt;/body&gt;



NOTE: This uses a functional state update to ensure/preserve previous state values that aren't currently being updated.
Alternatively you can create a mapping of state =&gt; setState function and use a similar change handler as before, this time though you won't need to merge in updates manually.
const FormInvite = props =&gt; {
  const [firstName, setFirstName] = React.useState(&quot;&quot;);
  const [lastName, setLastName] = React.useState(&quot;&quot;);
  const [country, setCountry] = React.useState(&quot;&quot;);
  const [email, setEmail] = React.useState(&quot;&quot;);

  const fieldSetStateMap = {
    firstName: setFirstName,
    lastName: setLastName,
    country: setCountry,
    email: setEmail
  };

  const changeHandler = e =&gt; {
    const { name, value } = e.target;
    fieldSetStateMap[name](value);
  };
  ...



const rootElement = document.getElementById("root");

const FormInvite = props =&gt; {
  const [firstName, setFirstName] = React.useState("");
  const [lastName, setLastName] = React.useState("");
  const [country, setCountry] = React.useState("");
  const [email, setEmail] = React.useState("");

  const fieldSetStateMap = {
    firstName: setFirstName,
    lastName: setLastName,
    country: setCountry,
    email: setEmail
  };

  const changeHandler = e =&gt; {
    const { name, value } = e.target;
    fieldSetStateMap[name](value);
  };

  React.useEffect(() =&gt; {
    console.log("firstname changed", firstName);
  }, [firstName]);
  React.useEffect(() =&gt; {
    console.log("lastname changed", lastName);
  }, [lastName]);
  React.useEffect(() =&gt; {
    console.log("country changed", country);
  }, [country]);
  React.useEffect(() =&gt; {
    console.log("email changed", email);
  }, [email]);

  return (
    &lt;form&gt;
      &lt;label&gt;
        First
        &lt;input
          type="text"
          value={firstName}
          name="firstName"
          onChange={changeHandler}
        /&gt;
      &lt;/label&gt;
      &lt;label&gt;
        Last
        &lt;input
          type="text"
          value={lastName}
          name="lastName"
          onChange={changeHandler}
        /&gt;
      &lt;/label&gt;
      &lt;label&gt;
        Country
        &lt;input
          type="text"
          value={country}
          name="country"
          onChange={changeHandler}
        /&gt;
      &lt;/label&gt;
      &lt;label&gt;
        email
        &lt;input
          type="email"
          value={email}
          name="email"
          onChange={changeHandler}
        /&gt;
      &lt;/label&gt;
    &lt;/form&gt;
  );
};

ReactDOM.render(
  &lt;React.StrictMode&gt;
    &lt;FormInvite /&gt;
  &lt;/React.StrictMode&gt;,
  rootElement
);
input {
  width: 3rem;
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"&gt;&lt;/script&gt;

&lt;body&gt;
  &lt;div id="root"&gt;&lt;/div&gt;
&lt;/body&gt;



NOTE: This can use a plain state update as each &quot;piece of state&quot; is fully independent of other state and the value is replaced each onChange.