Deactivate input in react with a button click - button

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

Answer 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.

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

Answer 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.

Answer 4

const [disabled , setDisabled] = useState(true)
if(condition){
setDisabled(false)
}else{
setDisabled(true)
}
return
<TextField placeholder="Name" disabled={ disabled} />