As atualizações dos estados dos componentes não é tão simples como parece, são assíncrono, em resumo demora um tempo para acontecer e as variáveis com os novos estados precisam ser vigiadas para tomar alguma decisão, no seu código basicamente para funcionar:
function Card() {
const [number1, setNumber1] = React.useState(0);
const [number2, setNumber2] = React.useState(0);
const [operation, setOperation] = React.useState("");
const [result, setResult] = React.useState(0);
function random() {
return parseInt(Math.random() * (11 - 0) + 0);
}
React.useEffect(() => {
setOperation(`${number1}+${number2}`);
},[number1, number2]);
React.useEffect(() => {
setResult(state => number1 + number2);
}, [operation]);
function handleSubmit() {
setNumber1(state => random());
setNumber2(state => random());
}
return (
<div className="card">
<h1>Treino de cálculo</h1>
<h2>
{operation} = {result}
</h2>
<input type="number" placeholder="Sua resposta" />
<button onClick={() => handleSubmit()}>
Verificar resposta
</button>
</div>
);
}
ReactDOM.render( <Card/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>
nesse exemplo aguarda alterar o estado das duas variáveis: number1
e number2
depois atualiza a variável operation
e por fim mostro todos os resultados, ou seja, tem uma sequencia lógica de atualização para funcionar.
Existe uma maneira bem melhor e para mim mais confiável, exemplo:
function Card() {
const [data, setData] = React.useState({
number1: 0,
number2: 0
});
const [result, setResult] = React.useState({
operation: '',
result: 0
});
function random() {
return parseInt(Math.random() * (11 - 0) + 0);
}
function handleSubmit() {
const number1 = random();
const number2 = random();
setData({number1, number2});
}
React.useEffect(() => {
const { number1, number2 } = data;
const operation = `${number1} + ${number2}`;
const result = number1 + number2;
setResult({
operation,
result
});
}, [data]);
return (
<div className="card">
<h1>Treino de cálculo</h1>
<h2>
{result.operation} = {result.result}
</h2>
<input type="number" placeholder="Sua resposta" />
<button onClick={() => handleSubmit()}>
Verificar resposta
</button>
</div>
);
}
ReactDOM.render( <Card/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>
nesse segunda forma é criado um objeto e quando esse objeto for alterado, eu altero o objeto de resultado é mais fácil controlar as alterações e a sequencia das variáveis do estado.