Completé un formulario en ReactJS, pero dado que varios de los campos son similares, estaba tratando de refactorizar el código en componentes. Anteriormente, antes de refactorizar el código en componentes, todo parecía funcionar bien hasta que intenté crear un componente para el campo de entrada.

Luego, escribir dentro del campo no parece funcionar. Sospecho que tiene que ver con la API de contexto que se usa porque la propiedad de valor no está establecida en un valor fijo y también la función onChange parece ser correcta.

Aquí está mi fragmento de código adjunto

Texto.jsx

 import React, { useContext } from "react"; import { StepperContext } from "../../../contexts/stepperContext"; export default function Text({ width = "w-[300px]", src = "/person.jpg", alt = "image name", alias = "name", placeholder = "enter a placeholder", }) { const { userData, setUserData } = useContext(StepperContext); const handleChange = (e) => { const { name, value } = e.target; setUserData({ ...userData, [name]: value }); }; return ( <div className="pt-5 self-center"> <div className={`flex self-start items-center border-solid border-[1px] border-black rounded-md h-12 ${width}`} > <img className="pl-4" src={src} alt={alt} /> <input onChange={handleChange} value={userData[{ alias }] || ""} className="pl-4 outline-none placeholder:capitalize placeholder:text-gray-800 placeholder:font-normal w-full pr-4" type="text" name={alias} id={alias} placeholder={placeholder} /> </div> </div> ); }