javascript - React-TS: Passing a function with arguments from state as callback - cannot get arguments

Question

I have a problem I have an email and password which I set to the state from inputs

 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');

There is a button that handles the onEnter function where I passing an onButtonEnter callback with email and password params from the state

               <Button
                    className="login"
                    label={'login'}
                    onEnter={() => {
                        onButtonEnter(email, password);
                    }}
                />

This function:

      const onButtonEnter = (email: any, password: any) => {
  
        console.log('email enter', email);
        console.log('password enter', password);

          if.....

Here in 2 console.logs I have undefined What is it? What is the problem?

If I for example pass the arguments just a string, like : 'aaaa' in console.log I can see the result. But email and password from the State are undefined...

question from:https://stackoverflow.com/questions/65846123/react-ts-passing-a-function-with-arguments-from-state-as-callback-cannot-get

Answer 1

Why do you give email and password as the parameter of your onButtonEnter function, as they are already stored in the state of you component, so the function onButtonEnter already knows them.

So I would do something like this :

const App = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const onButtonClick = () => {
    console.log(email);
    console.log(password);
  }

  return (
    <div>Test
      <Button
        className="login"
        onClick={onButtonClick}
      >Button</Button>
    </div>
  );
}