{"id":1414,"date":"2023-08-12T16:01:03","date_gmt":"2023-08-12T15:01:03","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=1414"},"modified":"2023-08-12T16:01:04","modified_gmt":"2023-08-12T15:01:04","slug":"disable-button-on-empty-input-in-react-js","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/disable-button-on-empty-input-in-react-js\/","title":{"rendered":"Disable Button on Empty Input in React JS"},"content":{"rendered":"\n

In a React application, you can achieve the same functionality of disabling a button when an input is empty using React state and event handling.<\/p>\n\n\n\n

1. Create a New React Application<\/h2>\n\n\n\n

The first thing we have to do is to create our React application using the command:<\/p>\n\n\n\n

npx create-react-app folder-name<\/code><\/pre>\n\n\n\n
2. Add Bootstrap Styling<\/h2>\n\n\n\n
We’re also going to add a little Bootstrap for ease of design. We will add the following code to our index.html<\/em><\/strong> file in the public folder of our application.<\/p>\n\n\n\n
  <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-4bw+\/aepP\/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9\" crossorigin=\"anonymous\"><\/code><\/pre>\n\n\n\n
Next, we will modify our App.js file as follows:<\/p>\n\n\n\n
import React, { Component } from 'react';\n\nclass App extends Component{\n  render(){\n    return(\n  <div className=\"container\">\n  <form>\n  <div class=\"mb-3 col-md-6\">\n  <label for=\"exampleFormControlInput1\" class=\"form-label\">Email address<\/label>\n  <input onChange={(e) => this.getValue(e)} type=\"email\" class=\"form-control mb-4\" placeholder=\"name@example.com\" \/>\n  <button type=\"button\" class=\"form-control btn btn-primary btn-lg\">Submit<\/button>\n<\/div>\n<\/form>\n      <\/div>\n    )\n  }\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
\"Disable<\/figure>\n\n\n\n
3. Set Initial State of Application<\/h2>\n\n\n\n
We need to set initial state for our application. What we want is that as the application loads initially, let the button be disabled and then we can conditionally check for input.<\/p>\n\n\n\n
We will set the state as follows:<\/p>\n\n\n\n
constructor(props){\n    super(props);\n    this.state = {\n      isDisabled: false,\n      email: ''\n    }\n  }<\/code><\/pre>\n\n\n\n
Next, we need to set that state in our button element.<\/p>\n\n\n\n
render(){\n    const { isDisabled } = this.state;\n    return(\n  <div className=\"container\">\n  <form>\n  <div class=\"mb-3 col-md-6\">\n  <label for=\"exampleFormControlInput1\" class=\"form-label\">Email address<\/label>\n  <input type=\"email\" class=\"form-control mb-4\" placeholder=\"name@example.com\" \/>\n  <button disabled={isDisabled} type=\"button\" class=\"form-control btn btn-primary btn-lg\">Submit<\/button>\n<\/div>\n<\/form>\n      <\/div>\n    )\n  }<\/code><\/pre>\n\n\n\n
4. Create a Function that Gets the Entered Value<\/h2>\n\n\n\n
Finally, we’re going to create a function that gets the entered value and updates the state.<\/p>\n\n\n\n
  getValue = (e) => {\n    if(e.target.value === \"\"){\n      this.setState({ isDisabled: true })\n    }else {\n      this.setState({ isDisabled: false })\n    }\n  }<\/code><\/pre>\n\n\n\n
Full Code Here<\/h2>\n\n\n\n
import React, { Component } from 'react';\n\nclass App extends Component{\n\n  constructor(props){\n    super(props);\n    this.state = {\n      isDisabled: true,\n      email: ''\n    }\n  }\n\n  getValue = (e) => {\n    if(e.target.value === \"\"){\n      this.setState({ isDisabled: true })\n    }else {\n      this.setState({ isDisabled: false })\n    }\n  }\n\n  render(){\n    const { isDisabled } = this.state;\n    return(\n  <div className=\"container\">\n  <form>\n  <div class=\"mb-3 col-md-6\">\n  <label for=\"exampleFormControlInput1\" class=\"form-label\">Email address<\/label>\n  <input onChange={(e) => this.getValue(e)} type=\"email\" class=\"form-control mb-4\" placeholder=\"name@example.com\" \/>\n  <button disabled={isDisabled} type=\"button\" class=\"form-control btn btn-primary btn-lg\">Submit<\/button>\n<\/div>\n<\/form>\n      <\/div>\n    )\n  }\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
Result<\/h2>\n\n\n\n