Deactivate input in react with a button click

Question

I have this basic component and I want the textfield to be deactivated or activated whenever I click on a button. How can I achieve this?

This is my sample code:

import React from "react";
import Button from 'react-button'

const Typing = (props) => {
    var disabled = "disabled";
    var enabled = !disabled;

  const handleUserInput = (event) => props.onUserInput(event.target.value);
  const handleGameClik = (props) => {

      disabled = enabled;
  }
  return(
      <div>

          <input
              className = "typing-container"
              value = {props.currentInput}
              onChange = {handleUserInput}
              placeholder=" ^__^ "
              disabled = {disabled}/>
          <Button  onClick = {handleGameClik}> Start Game  </Button>
          <Button> Fetch Data </Button>

          </div>
          );
};

Solution 1

A simplified solution using state could look like this:

class Typing extends React.Component {
  constructor(props) {
    super(props);
    this.state = { disabled: false }
  }
  handleGameClik() {
    this.setState( {disabled: !this.state.disabled} )
  } 
  render() {
    return(
        <div>
          <input
                className = "typing-container"
                placeholder= " type here "
                disabled = {(this.state.disabled)? "disabled" : ""}/>
          <button  onClick = {this.handleGameClik.bind(this)}> Start Game  </button>
          <button> Fetch Data </button>
        </div>
    );
  }
};

Working Codepen here.

Solution 2

** 2019 **

Another option is to use, react-hooks' hook useState.

Edit: In a functional component

import React, {useState} from 'react';

function Typing(props) {
  const [disabled, setDisabled] = useState(false);

  function handleGameClick() {
    setDisabled(!disabled);
  }

  return (
    <div>
      <input
        className='typing-container'
        placeholder=' type here '
        disabled={disabled}
      />
      <button type='submit' onClick={handleGameClick}> Start Game </button>
      <button> Fetch Data </button>
    </div>
  );
}

Solution 3

This might confuse you, but the guys at React.js actually rebuild every form component and made them look almost exactly like the native HTML component. There are some differences however.

In HTML you should disable an input field like this:

<input disabled="disabled" />

But in React.js you'll have to use:

<input disabled={true} />

The accepted example works because anything not 0 is considered true. Therefor "disabled" is also interpreted as true.

Comments

[Ali Sepehri.Kh]

You need to store disable variable in component state and change it there. When you change the state of the component, the render method will invoke and refresh the component.

[Foxhoundn]

You do not need to do {(this.state.disabled)? "disabled" : ""} when a prop is false || null it is automatically ommited. disabled={this.state.disabled} is enough.

[Paul Razvan Berg]

Or, if your disabled state depends on some other prop or state item, use useMemo.

[Crisan Lucian]

react-hooks' hook -> functional component

[Domino]

Besides, both disabled="disabled" and disabled="" mean the input is disabled in HTML. Boolean attributes are false when the attribute is removed, not set to an empty string. In fact, this answer should definitely be edited to remove that incorrect code.

[wintvelt]

@Domino I agree that my code could be a bit cleaner/ nicer, but it is not incorrect. you can see in the working codepen that the example code just works, so “disabled” and “” do not mean the same thing in react/jsx. Today, I would probably use hooks and something like <input disabled={this.state.disabled}.

[Domino]

Ah, I see. React doesn't actually call element.setAttribute("disabled", "") but probably translates that into element.disabled = "" and the empty string is false. That sure is a quirk to keep in mind.

[Denis]

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution.

[Sarthak Bansal]

This is a better solution