React JS – disable a button if the input field is empty?


React Code:

import { useState } from "react";

export default function IndexPage() {
  const [text, setText] = useState("");

  const autoComplete = (e) => {
    setText({ value: e.target.value });
  };

  return (
    <form>

      <input type="text" placeholder="search here" onChange={autoComplete} />

      <button type="submit" disabled={!text}> find </button>

    </form>
  );
}

SandBox Link: https://codesandbox.io/s/practical-panini-slpll


Problem:

when Page Loads, the find button is disabled at first because the input field is empty which is good. But,

Now, when I start typing something. then delete them all with Backspace key. the find button is not disabling again.


I want:

I just want to have my find button disabled if the input field is empty

Where I’m doing wrong?


Source: React – Stack Overflow

November 28, 2021
Category : News
Tags: forms | input | next.js | reactjs | use-state

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.