How to make a row editable on click of a button in React bootstrap table?

Question

I want to make a row editable in a react bootstrap table on click of a button, how can I do it, I am new to React.

Answer 1

Without any sample code, it's not easy to provide a full working example but only a suggestion:

What I would try to do: in constructor:

this.state = { isEditable: false }

in onClick of button:

this.setState({ isEditable: true })

in table you should set the editable field (if this is exists, this is why I need sample code) to the state isEditable field

Answer 2

You can do that by using readOnly property of input and change it with onFocus.

<input type="text"
 className="form-control"
 value={this.state.value}
 onChange={this.ChangeValue}
 onFocus={this.EditValue}
 readOnly={this.state.boolean}
 />

and in the EditValue function:

    EditValue=()=>{this.setState({boolean:true})}