How to disable a button when an input is empty?

Question

I\'m new to React. I\'m trying to disable a button when an input field is empty. What is the best approach in React for this?

I\'m doing something like the following:

Answer 1

Using constants allows to combine multiple fields for verification:

class LoginFrm extends React.Component {
  constructor() {
    super();
    this.state = {
      email: '',
      password: '',
    };
  }
  
  handleEmailChange = (evt) => {
    this.setState({ email: evt.target.value });
  }
  
  handlePasswordChange = (evt) => {
    this.setState({ password: evt.target.value });
  }
  
  handleSubmit = () => {
    const { email, password } = this.state;
    alert(`Welcome ${email} password: ${password}`);
  }
  
  render() {
    const { email, password } = this.state;
    const enabled =
          email.length > 0 &&
          password.length > 0;
    return (
      

        
        
        
        Login
      
    )
  }
}

ReactDOM.render(, document.body);