Los botones no están haciendo lo que se supone que deben hacer, lo que se suma a comentarios buenos, neutrales y malos.

Curiosamente, agregué un botón predeterminado que usa una sintaxis diferente para agregar mal, y funciona. Así que hay algo mal con mis funciones "giveGoodFeedback".

 import React, { useState } from 'react' const Button = (props) => { return ( <button onClick={props.handleClick}> {props.text} </button>) } const App = () => { // save clicks of each button to its own state const [good, setGood] = useState(0) const [neutral, setNeutral] = useState(0) const [bad, setBad] = useState(0) const giveGoodFeedback = () => { setGood( good + 1 ) } const giveNeutralFeedback = () => { setNeutral( neutral + 1 ) } const giveBadFeedback = () => { setBad( bad + 1 ) console.log('Bad increases') } return ( <div> <h1>give feedback</h1> <Button text='good' onClick={giveGoodFeedback}/> <Button text='bad' onClick={giveBadFeedback}/> <Button text='neutral' onClick={giveNeutralFeedback}/> <button onClick={() => setBad(bad + 1)}> Click me </button> <h1>Statistics</h1> <ul> <li>good : {good}</li> <li>neutral : {neutral}</li> <li>bad : {bad}</li> </ul> code here </div> ) } export default App;