how can i use two onChange function in the same component?-CodePudding

I'm trying to use to onChange functions in the same component but it is not allowed.

I have tried to mix them but I couldn't since one of them is useState and the other one is a const function

Here is my code

const signup = () => {
  const [password, setPassword] = useState("");

  const handlePasswordChange = (prop) => (event) => {
    setValues({ ...values, [prop]: event.target.value });
  };

  return(
    <Input
      //    type="password"
      id="passwordInput"
      onChange={(e) => setPassword(e.target.value)}
      placeholder="Yaziniz"
      type={values.showPassword ? "text" : "password"}
      onChange={handlePasswordChange("password")}
      value={values.password}
    />

How can I use both of these two onChange handlers in the same component?

CodePudding user response：

Call both of them in onChange handler

onChange={(e) => {
  setPassword(e.target.value);
  handlePasswordChange("password")(e);
}}

CodePudding user response：

All you need is use these function to one onChange.

<Input 
  onChange={(e) => { 
    setPassword(e.target.value)
    handleChangePassword("password")
    ...otherFunctions
  }
/>

CodePudding user response：

just add && operator to next function

onChange={(e) => setPassword(e.target.value) && yourFunction}