La terminal/consola no devuelve ningún error. Estoy confundido en cuanto a dónde me estoy equivocando. El handleLeftClicks() se usa para representar el número de veces que se hace clic en el botón izquierdo y, respectivamente, en el botón derecho. El componente allClicks within History está destinado a representar el número total de clics. No puedo actualizar {left} y {right}. Intenté registrar en la consola ambas funciones, pero no pude obtener una salida en la consola.

Realmente me disculpo si esta pregunta de novato le hizo perder el tiempo.

 import React, { useState } from "react"; const History = (props) => { if (props.allClicks.length === 0) { return <div>The app is used by pressing the buttons</div>; } return <div>button press history: {props.allClicks.join(" ")}</div>; }; const Button = ({ handleClick, text }) => ( <button onClick={handleClick}>{text}</button> ); const App = () => { const [left, setLeft] = useState(0); const [right, setRight] = useState(0); const [allClicks, setAll] = useState([]); const handleLeftClicks = () => { console.log("left click"); setAll(allClicks.concat("L")); setLeft(left + 1); }; const handleRightClicks = () => { console.log("right click"); setAll(allClicks.concat("R")); setRight(right + 1); }; console.log(left); console.log(right); console.log(allClicks); return ( <div> {left} <Button handleClick={handleLeftClicks} text="left" /> <Button handleClick={handleRightClicks} text="right" /> {right} <History allClicks={allClicks} /> </div> ); }; export default App;