How to create multi editable cells on click in React-table - reactjs

Question

I have a table with 4 columns: First Name, Last Name, City, Address. If the user click on City, City and Address becomes editable.
class Home extends React.PureComponent {
constructor(props){
super(props);
this.state = {
columns : [
{
Header: 'First Name',
accessor: 'firstName'
},
{
Header: 'Last Name',
accessor: 'lastName'
},
{
Header: 'City',
accessor: 'city',
Cell: this.clickableCell
},
{
Header: 'Address',
accessor: 'addr'
}
],
data: [
{
firstName: "MyName",
lastName: "MyLastName",
city: "MyCity",
addr: "My Address"
}
],
};
}
renderEditable = (cellInfo) => {
const products = this.state.data;
const row = products[cellInfo.index];
const value = row[cellInfo.column.id]
return (
<div contentEditable suppressContentEditableWarning>
{value}
</div>
)
};
clickableCell = (cellInfo) => {
const products = this.state.data;
const row = products[cellInfo.index];
const value = row[cellInfo.column.id]
const onClick = () => {
let c = Object.assign({}, this.state);
// Change the City and Address Cell's function to create an
// editable cell
c.columns[2]['Cell'] = this.renderEditable;
c.columns[3]['Cell'] = this.renderEditable;
this.setState({...c});
this.forceUpdate();
}
return (
<div onClick={onClick}>
{value}
</div>
)
};
render() {
return(
<ReactTable
className="-striped -highlight"
data={this.state.data}
columns={this.state.columns}
/>
)
}
}
My idea was bind to City's Cell a function to create a clickable div and after replace the Cell's function with a different function to render an editable div..but this idea doesn't work...