react.js doing autosubmit form when values = conditions

Question

so i have react login and register form buttons that call redux actions, but when values = conditions its calling automatickly and 2 actions dispatching in one time Its my code `

const LoginPage = p => {
    const [login, setLogin] = useState("")
    const [password, setPassword] = useState("")
    return(<div className="login-box">
 <form>
        <input className="input-login form-control" placeholder="Type your login here"onChange={(e) => setLogin(e.target.value)}/>
        <input className="input-login form-control" placeholder="Type your password here"   onChange={(e) => setPassword(e.target.value)}/>
   {login.length >= 4 && password.length >= 4 ? (<div ><button onClick={actionLogin(login,password)} className="btn  btn-primary login-btn">Login</button> 
        <button onClick={actionReg(login,password)} className="btn  btn-primary login-btn">Register</button>   </div>)
        : 
        (<div><button className="btn  btn-primary login-btn" disabled>Login</button> 
        <button className="btn  btn-primary login-btn" disabled>Register</button></div>)
        }
   </form>
    </div>)
}

`

Answer 1

The problem in your code is that when you generate the button this way:

<button onClick={actionLogin(login,password)}...

you are executing the function. Try this way:

<button onClick={() => actionLogin(login,password)}...

Same thing with actionReg function

Answer 2

You're calling actionLogin and actionReg right away when the components are first rendered, rather than attaching click handlers to them.

These:

onClick={actionLogin(login,password)}
onClick={actionReg(login,password)}

should be:

onClick={() => actionLogin(login,password)}
onClick={() => actionReg(login,password)}

Also, rather than repeat the button components, you can just set the disabled state based on your condition:

const invalidPasswordOrLogin = login.length < 4 || password.length < 4

return (
  <div>
    <button onClick={() => actionLogin(login,password)} className="btn  btn-primary login-btn" disabled={invalidPasswordOrLogin}>Login</button> 
    <button onClick={() => actionReg(login,password)} className="btn  btn-primary login-btn" disabled={invalidPasswordOrLogin}>Register</button>
  </div>
)

Answer 3

When your condition matches, the buttons are rendered. But he onClick event handler attached to these are executed during the render process itself. And due to this, there are 2 dispatches. What you should instead do is to make the function to be called only after the button is clicked.

This can be achieved by modifying then onClick for buttons to something like below

<div>
    <button onClick={() => actionLogin(login,password)} className="btn  btn-primary login-btn">Login</button> 
    <button onClick={() => actionReg(login,password)} className="btn  btn-primary login-btn">Register</button>
</div>

You have done correctly on the onChange event for inputs. Then i hope you understand why this type of syntax is necessary for the buttons too or where ever you pass the functions.