How to reset button's value to click in react - reactjs

Question

Given the following code I am struggling to figure out how to set value of button back to original state, after it is clicked once ?
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
/**
* links : https://www.youtube.com/watch?v=GhbhD1HR5vk&t=297s
* https://reactjs.org/docs/handling-events.html
*
*
*
*/
class Input extends Component {
constructor(props) {
super(props);
this.state = {
tagged: false,
user: '',
tag: ''
}
this.handleUserChange = this.handleUserChange.bind(this);
}
handleClick(e) {
this.setState({tagged: true});
e.preventDefault();
console.log('The link was clicked.');
}
handleUserChange(e) {
console.log("e.target.value");
this.setState({user: e.target.value});
}
handleTagChange(e) {
console.log(e.target.value);
this.setState({tag: e.target.value});
}
render() {
return (
<div id="id" style={divStyle}>
<p> hello </p>
<input
style = {textStyle}
placeholder="user#email.com"
type="text"
onChange={ this.handleUserChange.bind(this) }
>
</input>
<input
style = {textStyle}
placeholder="tag"
type="text"
onChange={ (e) => this.handleTagChange(e) }
>
</input>
<button
onClick={(e) => this.handleClick(e)}
style={buttonStyle}>
{this.state.tagged ? 'Tagged' : 'Tag ' }
</button>
<p>
{this.state.tagged ? this.state.user + ' was tagged with ' + this.state.tag : ''}
{/* {this.setState({tagged: false})} */}
</p>
</div>
)
}
}
var divStyle = {
position: 'relative',
top:'50%',
left: '15%',
};
var textStyle = {
margin: '20px 20px 20px 20px',
height: '20px',
width: '200px',
};
var buttonStyle = {
margin: '20px 20px 20px 20px',
background: '#7FFFD4',
color: 'black',
height: '25px',
width: '250px'
};
export default Input;

Answer 1

set your state like this in your handClick method
this.setState((prevState)=> ({
tagged: !prevState.tagged
}));