Estoy creando una aplicación en la que puedes practicar tus matemáticas. Tengo una función que devuelve dos números aleatorios en el renderizado de la página y paso la entrada para recopilar la respuesta del usuario en estado. Tiene un cambio que ejecuta setusersAnswer() para el valor introducido en la entrada. pero el problema es que cada vez que ingreso algo, vuelve a generar la pregunta completa en cada cambio realizado en la respuesta de los usuarios del componente de entrada.

aquí está la función en mi componente:

 const Question = ({input}) => { const makeQuestion = () => { firstNumber = randomRange(); secondNumber = randomRange(); return <>{`${firstNumber} +${secondNumber}`}</>; }; return (<> {makeQuestion()} {input} </>)} export default Question;

en mi aplicación js, tengo una entrada de texto:

aplicación.js:

 function App() { const [UserAnswer, setUserAnswer] = useState('') const handleUserAnswer=(val)=>{ setUserAnswer(val); } return( <Question input={<Input handleUserAnswer={handleUserAnswer}/>} /> )}

mi componente de entrada se ve así:

 const Userinput = ({handleUserAnswer}) => { return ( <Input onChange={handleUserAnswer}> )}

ahora limpié este código para que solo haya las partes básicas. Aquí hay una representación visual de cuál es el problema:

si ingreso algo en la entrada, se activa una nueva representación y la función de número aleatorio se ejecuta nuevamente.

desencadena una nueva representación de toda la interfaz de usuario que no quiero. Quiero almacenar la respuesta del usuario sin activar una nueva representación.