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: });

  return (

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

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


SandBox Link:


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.