score:0

you can achieve that using two states in your component. one for input and another for the button.

const app = () => {
  const [input, setinput] = usestate('') // for input
  const [isdisabled, setisdisabled] = usestate(false) // for button

  // when input is changing this function will get called
  const onchange = (e) => {
    setinput((prevstate) => (e.target.value))
    if(e.target.value.trim().length < 1) {   // checking the length of the input
      setisdisabled(true)  // disabling the button if length is < 1
    } else {
      setisdisabled(false)
    }
  }

  const onsubmit = (e) => {
    e.preventdefault()
    // code...
  }

  return (
    <div classname="app">
     <form onsubmit={onsubmit}>
      <input type='text' placeholder='email' value={input} onchange={onchange} />
      <button id='button' type='submit' disabled={isdisabled}>submit</button>
     </form>
    </div>
  );
}

if you have multiple inputs change the onchange function and input state accordingly.


Related Query

More Query from same tag