ESLint error on !string condition in a React JSX element

Viewed 16

I get an ESLint error from the statement: disabled={!input} (see below)

Here's how I define input:

const [input, setInput] = useState<string>("");

Snippet:

    <button
      disabled={!input}
      className="rounded-full font-bold py-2 px-5 text-white disabled:opacity-40"
    >
      Tweet
    </button>

Since input is a string, what's the correct way to pass ESLint checks. If string is empty, null, or undefined, disable the button.

I could create a function to do this, but there's got to be an easier way given the eloquent simplicity of !input.

The only thing that appears to work is the following snippet:

disabled={input === "" || input === null || input === undefined}

But is there an easier, more concise way?

0 Answers
Related