Estou querendo fazer uma operação matemática simples a partir de dois números aleatórios quando clico no botão, porém, cada vez que clico no botão o resultado mostrado em tela é da operação anterior. Não e não consigo deixar correto.
Exemplo:Exemplo:
Resultado 1 -> 2+2=0; Resultado 2 -> 3+5=4; Resultado 3 -> 5+5=8; Resultado 4 -> 2+6=10; ....
Resultado 1 -> 2 + 2 = 0;
Resultado 2 -> 3 + 5 = 4;
Resultado 3 -> 5 + 5 = 8;
Resultado 4 -> 2 + 6 = 10;
import React, { useState } from "react";
import * as math from "mathjs";
import "./styles.css";
export default function Card() {
const [number1, setNumber1] = useState(0);
const [number2, setNumber2] = useState(0);
const [operation, setOperation] = useState("");
const [result, setResult] = useState(0);
function handleSubmit() {
// Gera valores aleatórios para os números de 0 a 10
setNumber1(parseInt(Math.random() * (11 - 0) + 0));
setNumber2(parseInt(Math.random() * (11 - 0) + 0));
// Cria uma string com a operação completa
setOperation(`${number1}+${number2}`);
// Define o resultado a partir da string
setResult(math.evaluate(operation));
}
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< Verificar resposta
</button>
</div>
);
}