Disable Button when input is empty in react

Question

so I'm new at react and I have this problem when I want to disable Button when input is empty in react it only works one time until ;(

import React, { Component } from 'react';
class Form extends Component {
    render() {
        // start disable button when input is empty
        const success = () => {
            if (document.getElementById("id").value === "") {
                document.getElementById('button').disabled = true;
            } else {
                document.getElementById('button').disabled = false;
            }
        }
        // End disable button when input is empty
        return (
            <form onSubmit={this.props.addCourse}>
                <input onKeyUp={() => success()} id='id' value={this.props.value} type='text' onChange={this.props.updateCourse} />
                <button disabled id="button" type='submit'>Add Course</button>
            </form>


        );
    };

}


export default Form;

The code works fine. codesandbox.io/s/nervous-curran-m4r9d But the question still needs more details. E.g. what the browser you are using. And what does it means "works one time", it's like it doesn't disable or enable button back? — artanik
– artanik, Commented Feb 11, 2020 at 21:21

Zunaib Imtiaz · Accepted Answer · 2020-02-11 21:11:03Z

1

You could just do it like

  <form onSubmit={this.props.addCourse}>
                <input onKeyUp={() => success()} id='id' value={this.props.value} type='text' onChange={this.props.updateCourse} />
                <button disabled={this.props.value === ""} id="button" type='submit'>Add Course</button>
    //added condition to button disabled property
            </form>

If the value of this.props.value is empty it would return true and hence button will be disabled.

answered Feb 11, 2020 at 21:11

Zunaib Imtiaz

3,2191 gold badge13 silver badges22 bronze badges

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

Comments

Ace · Accepted Answer · 2020-02-11 21:09:25Z

0

When using React, you don't want to access elements directly like you do with document.getElem.... You want to create a state. What you want to do is create a variable disabled that is true when the input is empty, false otherwise. Then when it comes to adding the disabled property to the button: <button disabled={disabled}...>. So now the disabled property of the button will be the value of your disabled variable.

answered Feb 11, 2020 at 21:09

Ace

1,1462 gold badges11 silver badges27 bronze badges

Comments

newimprovement · Accepted Answer · 2020-02-11 21:17:47Z

0

It is generally unadvised to directly manipulate the DOM via react as react interacts with a virtual DOM to render a page.

see: https://dzone.com/articles/dom-manipulation-in-react

A better way to solve your problem is to check the value of by checking this.props.value instead of

if (document.getElementById("id").value === "")

You should also store whether the button is disabled or not in this.state

Given this, within your this.props.updateCourse you can have a check where

updateCourse(event) {
// If input value is equal to '' then
// Set button state to disabled
}

answered Feb 11, 2020 at 21:17

newimprovement

725 bronze badges

Collectives™ on Stack Overflow

Disable Button when input is empty in react

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