Deactivate input in react with a button click

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.

** 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>
  );
}

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.