Search code examples
javascriptreactjsreact-hooksonchangereact-props

How to add two functions passed as props to an onChange event in React and Material UI?


I want to add two functions passed in as props to an onChange event. handleInput is a function that sets the value when changed, and validate is a function that validates the input.

I've been reading through these posts but their answers are not working: How to pass two functions to onClick event in react and call two functions within onchange event in react

const FormFields = (props) => {

   const { values, handleInput, validate } =
    props;

   // Created a function to return two functions passed as props.
   const handleOnChange = (event) => {
      return {
         handleInput,
         validate,
      };
   };

   return (
      <TextField
          name="selection"
          label="Select"
          value={values}
          onChange={handleOnChange} // <- Function with two functions collapsed.
      />
   )
}

Solution

  • call those functions inside handle OnChange instead of returning them

       const handleOnChange = (event) => {
          handleInput(event)
          validate(event)
       };