Skip to main content
adicionou 139 caracteres ao conteúdo
Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

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>
  );
}

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 consigo deixar correto.

Exemplo:

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</button>
    </div>
  );
}

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 e não consigo deixar correto.

Exemplo:

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
        </button>
    </div>
  );
}
Fonte Link

useState não funciona como o esperado

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 consigo deixar correto.

Exemplo:

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</button>
    </div>
  );
}