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

Question

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?

Dennis Vash · Accepted Answer · 2021-11-28 09:08:48Z

2

It's a common mistake coming from Class Components, state setter in hooks does not merge state value as in classes.

You initialized your state as a string (useState('')) and then assigned it as an object

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

// State is an object { value: 'some text' }

Fix your set state call:

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

// State is a string 'some text'

Then to be more verbose you want to check if the string is empty:

<button disabled={text === ''}>find</button>

answered Nov 28, 2021 at 9:08

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

grenzbotin · Accepted Answer · 2021-11-28 08:57:10Z

0

disabled={!text.value}

Should do the trick. With this function

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

you are writing your input in text.value, not in text.

answered Nov 28, 2021 at 8:57

grenzbotin

2,5651 gold badge14 silver badges14 bronze badges

Comments

Seyed Kazem Mousavi · Accepted Answer · 2021-11-28 09:44:51Z

0

use this code for check text

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

answered Nov 28, 2021 at 9:44

Seyed Kazem Mousavi

4572 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related