Disable submit button if field is empty

Question

I have a React app using hooks and trying to figure out how to keep a submit button disabled if the search field is empty.

Assuming a regular form field with submit button, how can I set a state hook that keeps the search button disabled until the user inputs text. I assume there should be an onChange function that probably updates the state on input change, but not exactly sure of the implementation.

const [disabled, isDisabled] = useState(true);

<input type="text" id="q" name="q" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>

React's documentation on Controlled components may help on getting the text into state. — cbr
– cbr, Commented May 27, 2020 at 20:55

JMadelaine · Accepted Answer · 2020-05-27 21:03:29Z

If you want to disable a button when an input string is empty, then the only state you need is the value of the input string.

const [inputVal, setInputVal] = useState('')

// ...

<input value={inputVal} onChange={e => setInputVal(e.target.value)} />

// ...

<button disabled={!inputVal}> /* ... */ </button>

Here we connect the input component to the state value. This is called a controlled component, because its value is controlled from by an external source (the state value) as opposed to an uncontrolled component, which means the input element holds it's own internal state (the default way inputs work if you don't set their value prop directly.

When the input component receives input (such as someone typing a character) the onChange prop is called. All we do then is take the new value of the input element (e.target.value) and use it to set the state.

If you can derive state from other state, then you shouldn't be storing it in state. Having a state variable called disabled only makes things more complex. The general idea is to use as little state as possible, and compute as much as you can from that state.

Khabir · Accepted Answer · 2020-05-27 21:05:51Z

2

Please check this complete example where I used class component and use a disable property under state object. When you write something on textbox, the disable property will be set as false.

import React from "react";
export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {disable: true};
    }

    handleChange = (event) => {
        this.setState({disable: event.target.value === ''})
    };

    render() {
        return (
            <div>
                <div>
                    Name: <input onChange={this.handleChange}/> <br/>
                    <button disabled={this.state.disable} >Login</button>
                </div>
            </div>
        );
    }
}

here is the same example of functional component

import React, {useState} from "react";
export default function Login() {

    const [disable, setDisable] = useState(true);

    function handleChange(event) {
        setDisable(event.target.value === '');
    }

    return (
        <div>
            <div>
                Name: <input onChange={handleChange}/> <br/>
                <button disabled={disable}>Login</button>
            </div>
        </div>
    );
}

edited May 27, 2020 at 21:05

answered May 27, 2020 at 21:02

Khabir

5,8781 gold badge26 silver badges38 bronze badges

2 Comments

JMadelaine Over a year ago

Why do you need to use class components here? Function components do the job in an easier to understand way. OP even asks how can they do it using hooks.

Khabir Over a year ago

yes true, I was about to prepare the functional component as well which I already posted

Collectives™ on Stack Overflow

Disable submit button if field is empty

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related