He estado tratando de crear un formulario en el que, dependiendo de un botón de cambio, represente una o dos entradas diferentes. Mi código se ve así:
const Test = () => { const [switchButton, setSwitch] = React.useState(true) const handleSwitch = () => {setstate(!switchButton)} return <> <Switch checked={switchButton} onClick={() => handleSwitch} /> {!switchButton ? <> <label htmlFor="input_1">Input 1</label> <input id="input_1"/> </> : <> <label htmlFor="input_2">Input 2</label> <input id="input_2" /> <label htmlFor="input_3">Input 3</label> <input id="input_3" /> </> } </> } export default Test;Mi problema ocurre cuando ingreso caracteres en una entrada y luego los cambio: los mismos caracteres se muestran en mi nueva entrada renderizada. Ejemplo aquí.
¿Por qué pasó esto? estoy realmente perdido
use claves para los elementos, por lo que no se reconocerá como el mismo elemento que react intenta mapear elementos en cada renderizado si ya se renderizaron antes. entonces reacciona ve: 1 entrada y 2 entradas y piensa que la primera entrada es la misma que antes.
const Test = () => { const [switchButton, setSwitch] = React.useState(true) const handleSwitch = () => setSwitch((switch) => !switch) return ( <> <Switch checked={switch} onClick={handleSwitch} /> {!switchButton ? ( <React.Fragment key="key1"> <label htmlFor="input_1">Input 1</label> <input id="input_1"/> </> ) : ( <React.Fragment key="key2"> <label htmlFor="input_2">Input 2</label> <input id="input_2" /> <label htmlFor="input_3">Input 3</label> <input id="input_3" /> </> )} </> )} export default Test;pero de todos modos sería mejor usar una entrada controlada. algo como esto:
const [value, setValue] = React.useState(true) <input value={value} onChange={(e) => setValue(e.target.value)}/>