ReactJS clicking button - reactjs

Question

I am hoping that you can help me with this task, I just want to create a Like button, the initial counter for the button is 100, if the button is clicked it will add 1 and it will highlight (you can use the classname tool) and if the user undo their like it will decrease by one and it will not highlight
import cx from 'classnames';
import { Component } from 'react';
export default class LikeButton extends Component {
state = {
active: false,
count: 100
}
formatCount() {
const {count} = this.state.count
return count === 100 ? 100 : 101
}
render() {
return (
<>
<div>
<button className={this.state.active === false ? 'like' : 'like-button'}>Like | {this.formatCount()}</button>
</div>
<style>{`
.like-button {
font-size: 1rem;
padding: 5px 10px;
color: #585858;
}
.liked {
font-weight: bold;
color: #1565c0;
}
`}</style>
</>
);
}
}

Answer 1

Here's how to do it using functional components in React (which I'd strongly recommend):
import "./like.css"
export default function Like(){
const [count, setCount] = useState(100);
const [active, setActive] = useState(false);
function handleClick(){
if(active) {
// handle unliking
setActive(false);
setCount(oldCount => oldCount - 1);
} else {
// handle liking
setActive(true);
setCount(oldCount => oldCount + 1);
}
}
return(
<div>
<button
className={active ? 'liked' : 'unliked'}
onClick={handleClick}
>
Like | {count}
</button>
</div>
)
}
and like.css contents:
.unliked {
font-size: 1rem;
padding: 5px 10px;
color: #585858;
}
.liked {
font-weight: bold;
color: #1565c0;
}
You can rework this to the class-based approach pretty easily (though I'd recommend using functional components, they're really cool). Basically, you keep track of the count and whether or not they've already pressed the like button, and conditionally handle onClick based on the current state.