CódigoSandbox

Debe convertir ValorMaximo y ValorMinimo de cadenas a números.

 import React, { useState } from 'react'; import './style.css'; export default function PaginaInicial() { const [numeroAleatorio, setNumeroAleatorio] = useState(0); const [ValorMax, setValorMax] = useState(100); const [ValorMin, setValorMin] = useState(0); function BotaoMax() { var ValorMaximo = document.getElementById('max').value // Convert to number setValorMax(Number(ValorMaximo)); }; function BotaoMin() { var ValorMinimo = document.getElementById('min').value // Convert to number setValorMin(Number(ValorMinimo)); }; function gerarNumero() { const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin; setNumeroAleatorio(newNumber); if (ValorMax < ValorMin) { alert('Max value should be higher than Min value') setNumeroAleatorio('Error') }; }; return ( <div className="conteudo-centralizado"> <h3>Random Number:</h3> <div className="divNum"> </div> <div> <input type="number" id='min' min='1' max='9999' placeholder="Número Mínimo" onChange={BotaoMin} /> <input type="number" id='max' min='1' max='9999' placeholder="Número Máximo" onChange={BotaoMax} /> </div> <h1>{numeroAleatorio}</h1> <div className='area-botao'> <label> Click on the following button to get a random number: </label> <button onClick={gerarNumero}> Generate Number </button> </div> </div> ); }

las funciones nombradas en reaccionar no son reactivas, es decir, se evalúan una vez, si esa función hace referencia a un valor fuera del alcance de las funciones, solo usaría el valor inicial de esa variable si la variable se actualiza, la función no se reinicializaría

asi genrarNmero la funcion

 function gerarNumero() { const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin; setNumeroAleatorio(newNumber); if (ValorMax < ValorMin) { alert('Max value should be higher than Min value'); setNumeroAleatorio('Error'); } }

siempre tendría ValorMax y ValorMin para ser 100 y 0

puede resolver esto pasando ValorMax y ValorMin como argumento a la función

 function gerarNumero(ValorMax, ValorMin) { const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin; setNumeroAleatorio(newNumber); if (ValorMax < ValorMin) { alert('Max value should be higher than Min value'); setNumeroAleatorio('Error'); } }

o puede usar el enlace useCallback para reaccionar, lo que reinicializaría una función si las dependencias cambian

 const gerarNumero = useCallback(() => { const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin; setNumeroAleatorio(newNumber); if (ValorMax < ValorMin) { alert('Max value should be higher than Min value'); setNumeroAleatorio('Error'); } }, [ValorMax, ValorMin]);

Debe agregar la función Math.floor() en su función gerarNumero().

const newNumber = parseInt( Math.floor (Math.random() * (ValorMax - ValorMin) + ValorMin));

Consulte el siguiente enlace https://futurestud.io/tutorials/generate-a-random-number-in-range-with-javascript-node-js