import React from "react" export default function Components() { const PI = 3.14 const [value, setValue] = React.useState("") const [inputvalue, setInputvalue] = React.useState(0) function calculation() { const originalvalue = PI * inputvalue * inputvalue setValue(`${originalvalue} cm^2`) console.log(value) } function getInput (event) { setInputvalue(event.target.value) } console.log("main") return ( <div className="output"> <h4>Enter the r of the circle below in cm</h4> <input onChange={getInput} type="number" name="input"/> <button onClick = {calculation}> Show Area</button> <p>Area of the circle is : {value}</p> </div> ) }Entonces, cada vez que ingreso un número, mi componente se vuelve a representar (lo verifiqué con un registro de la consola), pero mi valor de salida, que es un valor de estado (el área del círculo es: {valor}), aún permanece en la página. En cambio, cuando el componente se vuelve a renderizar, debe asignarse como "" nuevamente. Pero no está sucediendo y mi código funciona bien. Sólo quiero entender cómo es esto posible
Su getInput está actualizando inputvalue , no value .
Para que el controlador onChange de su elemento de entrada actualice el contenido de la interfaz de usuario, getInput debe ser algo más como:
function getInput (event) { setValue(event.target.value) }