Toggle button onclick in react - reactjs

Question

I am making a table in react, where I want to change the edit button to save when I click on it. I have tried the below code, I know this isn't the correct way. Can anyone tell me what is the correct approach?
This is the edit button in render. It calls edit function when clicked.
dataProp contains the json data I am importing from a file.
{this.state.dataProp.map((data, index) => {
return (
<div className="show-grid row category-row">
<div className="col-md-8 text-left category" key={data.brandId}>
<b>{data.categoryName}</b></div>
<div className="col-md-4 text-right" >
<button className="edit" ref="newText" onClick={() =>
this.edit(index)}>{this.state.text}</button>
</div>
</div>
</div>
)
})}
class DisplayTable extends Component {
constructor(props) {
super(props);
this.state = {
text: "EDIT",
newArray: [],
dataProp: this.props.dataProp,
productsEditList:[ ---->This is for toggling individual button
{
id: 0,
isEdit: false
},
{
id: 1,
isEdit: false
},
{
id: 2,
isEdit: false
}
]
}
this.edit = this.edit.bind(this);
this.save = this.save.bind(this);
}
edit(key) {
this.state.productsEditList.map(keyy => {
if (key == keyy.id) {
keyy.isEdit:true
}
this.save(key);
})
}
save(key) {
if (!this.state.editing.key) {
this.setState({
text: 'SAVE',
editing: false
})
}
}
This code causes all the buttons change to save when I click on any one of them.
I do not understand how should I toggle individual buttons.
all buttons changes to save when I click on anyone of them

Answer 1

I took the text of the button in a state and toggled it whenever my button is clicked.
Here is the code for button -
<button className={this.state.text === "EDIT" ? "edit" : "save"} onClick={() =>this.edit}>{this.state.text}
</button>
Here is code for toggling the button
edit() {
if (this.state.editing === false) {
this.setState({
text: 'SAVE',
editing: true
});
}
else {
this.setState({
text: 'EDIT',
editing: false
});
if (this.state.changedSkus.length > 0) {
this.props.edit_menu_items_api({ "changedSkus": this.state.changedSkus });
}
}
this.render();
}