How pass arguments to arrow function javascript [duplicate]

Question

I have a react component where i want to call same arrow function with different arguments, but i am stuck on how to pass argument to it, now i am questioning myself can i do it ?

function Register(props) {

  const handleChange = (event) => {
    // here i want receive multiple arguments here eg. fromText1, fromText2
  }

  return (
        <React.Fragment>
           <TextField
           ...
           onChange={handleChange} // handleChnage('fromText1');
          />

          <TextField
           ...
           onChange={handleChange} // handleChnage('fromText2');
          />
         ....
        </React.Fragment>

   );
}

Answer 1

Just do a double arrow function like this:

const [state, setState] = React.useState({})
const handleChange = name => e => {
    setState({
        ...state,
        [name]: e.target.value
    })
}

// later in your code

<TextField
    ...
    onChange={handleChnage('fromText1')}
/>

// this will cause the change of value of formText1 in your state

Answer 2

You have a couple of options, but the typical solution in a React functional component is to use an arrow function wrapper:

onChange={e => handleChange(e, "fromText1")}

With that, the first argument would be the event object and the second would be the string "fromText".

Alternatively, you could use bind:

onChange={handleChange.bind(null, "fromText1")}

With that, the first argument would be the string "fromText" and the second would be the event object.

The event object also has a couple of handy properties, such as target (the DOM element the event was targeted at) and currentTarget (the DOM element where the event handler was attached — React synthesizes this a bit as it uses delegation internally).