How to activate button in condition

Question

const Login = () => { const [ID, setID] = useState(); const [PW, setPW] = useState(); function handleIdInput(event) { setID(event.target.value); console.log(ID); } function handlePWInput(event) { setPW(event.target.value); console.log(PW); } <form> <div> <input type="text" id="ID" className="boxes" onChange={handleIdInput} /> </div> <div> <input type="password" id="password" className="boxes" onChange={handlePWInput} /> </div> <button className="boxes" type="button" onClick={goList}> LogIn </button> </form>; };

I want to activate the button if id includes @ and password has at least 7 characters. I'm trying to find a way not to use class and this method. Thank you!

Tanishq Vyas · Accepted Answer · 2021-12-04 13:56:02Z

Please make use of disabled property.

 <button className='boxes' type='button' onClick={goList} disabled={()=> checkDisabled(ID, PW)}> LogIn </button>

The checkDisabled function must return true or false based on your requirements.

const checkDisabled = (id, password) => { // condition here if(id.includes('@') && password.length >= 7) { return false; } return true; }

Then finally the component code must look like this. Please note the changes I have made related to how the state variables are connected with the input component.

import { useState } from "react"; const Login = () => { const [ID, setID] = useState(""); const [PW, setPW] = useState(""); function handleIdInput(event) { setID(event.target.value); console.log(ID); } function handlePWInput(event) { setPW(event.target.value); console.log(PW); } const checkDisabled = (id, password) => { // condition here if (id.includes("@") && password.length >= 7) { return false; } return true; }; return ( <form> <div> <input type="text" id="ID" className="boxes" value={ID} onChange={(e) => handleIdInput(e)} /> </div> <div> <input type="password" id="password" className="boxes" value={PW} onChange={(e) => handlePWInput(e)} /> </div> <button className="boxes" type="button" onClick={goList} disabled={() => checkDisabled(ID, PW)} > LogIn </button> </form> ); }; export default Login;

Reference for useState hook.

Thank you so much for the help! But sadly, it's not working. The button is always disabled. I wonder why
I have added the working code for you. Please check if this helps. This works in my system. React version 17.0.2. This is assuming that you have an appropriate goList function.
Oh I just found what the problem is. I didn't put "" in useState(). Can I ask you why did you write the code like useState("") not just useState() with blank? Thank you
The useState hook takes in a parameter that will be used as the value while initializing the state variable aka the default value of the variable from the start. I have added a reference for the hook in the answer at the bottom for your reference. I hope it helps : )

Collectives™ on Stack Overflow

How to activate button in condition

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related