Soy nuevo en React y muy aficionado con js. Tengo un problema al pasar el estado de los componentes. Tengo un componente que es un botón en un archivo separado. Cuando el usuario hace clic en él, se le solicita que haga algunas cosas de un tercero y obtengo algunas cosas (información) como un número de cuenta.

Quiero pasar ese número de cuenta a app.js y luego a otros componentes y páginas para poder cambiar el comportamiento en función de él. A continuación se muestra el código de referencia:

aplicación.js

 function App() { const [mmAccount, setMMAccount] = useState(''); function handleChildClick(mmAccount) { setMMAccount(mmAccount) console.log('new acct:', mmAccount); } return ( <Router> <SpecialButton mmAccount={mmAccount} onAcctChange={handleChildClick}/>

botónespecial.js

 function SpecialButton({ mmAccount, onAcctChange }) { const { activate, deactivate, account } = imported3rdpartystuff() function handleClick(event) { onAcctChange(event.target.account) console.log("handle click", mmAccount); } if (window.somestuff is true) { return [ <p> {!account && <LoadingButton } />} onClick={(e) => { activate(); handleClick(e)}}> Connect Here</LoadingButton>} {account && <Button variant="contained" />} onClick={deactivate}>Disconnect: {account.substring(0,5)} ... {account.slice(-4)} </Button>}</p>, ];}

Siento que event.target.account no es la forma de obtener el valor de la cuenta en mmAccount y volver a pasar a app.js. Probé tal vez 5 variaciones diferentes de funciones y constantes. Ahora, tratando explícitamente de pasar la cuenta a esta sintaxis event.target, realmente no entiendo.

Si paso la cuenta directamente, me sale el siguiente error:

 function handleClick(event) { onAcctChange(account)

y console.log(mmAccount) en app.js o en el archivo de botón, obtengo un valor indefinido.

¿Se está ejecutando la actualización antes de que mmAccount se actualice o alguien tiene otra idea de dónde me equivoqué?