Click to Enable TextField React - reactjs

Question

I am displaying tabular data and each cell displays data using a TextField of Material UI (like input field). I want to show all of these TextFields as disabled at first, and enable any of them if they are clicked on. So user would click on the TextField and field would become available to alter. How can I do that?
Setting the state for field
state = {
button: false,
}
I have the TextField like below:
<TextField
disabled={this.state.button}
onClick={this.fieldActivate}
name="abc"
Activating field
fieldActivate(event) {
this.setState({
button: true
})
}

Answer 1

onClick and disabled
They don"t work together since disabled elements are not clickable. However, you could use something like onMouseOver.
Callback and Scope
If you want to define a function for an Event which uses this keyword, you need to either bind this or call the function from an anonymous function.
Finding the target
Since you only want one field to be enabled, you need to identify it somehow. Give them keys/ids.
Example
class MyComponent extends React.Component {
state = {
enabled: -1
}
handleMouseOver(id) {
this.setState({
enabled: id
});
}
render() {
let inputs = [];
for (let i=0; i<=20; i++) {
inputs.push({ id: i, placeholder: 'Input ' + i });
}
return (
<div>
{inputs.map((input) => {
return(
<input
disabled={this.state.enabled !== input.id}
type='text'
placeholder={input.placeholder}
onMouseOver={(e) => {
this.handleMouseOver(input.id);
}}
/>
);
})}
</div>
);
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('app')
);
input:disabled{
background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='app'></div>

Answer 2

state = { currentFocusElement: '' }
...
<TextField
disabled={this.state.currentFocusElement !== 'name'}
onFocus={() => this.setState({ currentFocusElement: 'name' })}
The idea is force a re-render when onfocus, and change the disabled value