Estoy creando una próxima aplicación que extrae los campos de formulario de una colección de firestore. Los campos del formulario se pueden cambiar en la base de datos y los cambios se reflejan en el formulario. Renderizo los campos de texto dinámicamente como a continuación.
{ formfield && formfield .filter((items => items.type === 'text')) .sort((a,b) => (a.order_by > b.order_by) ? 1 : -1) .map(item => { return ( <div className="input-field mb-40" key={form_item.id}> <input placeholder={form_item.place_holder} type="text" id={ item.item_id } required = {item.required} onChange={e => setItem(e.target.value)} /> <label htmlFor="full_name" className="active fnt-16"> { form_item.label } </label> </div> ) }) } El desafío al que me enfrento es con el manejo de onChange . Me gustaría usar el useState pero no sé cómo recorrerlo y actualizarlo según el ID de campo que se adquiere de la base de datos.
Yo he tratado
textfields && textfields.map((text, index) => { let textF = text.item_id; let setTextF= 'set' + textF; [text, setTextF ] = useState('') }) But this doesn't work as it says I can't assign string to `setTextF`. Does anyone know how to go about this?Voy a suponer que desea usar useState para retener los datos del formulario hasta que lo vuelva a enviar. Ya tienes el código para crear el formulario, así que creo que quieres tener un objeto que contenga todos los pares k/v. Así que en la parte superior de su componente:
const [text, setText] = useState({})Luego puede establecer los valores predeterminados desde el servidor:
textfields && textfields.map((text, index) =>{ setText({...text, {index: text.item_id}}) // not really sure what you want here })Ahora ha creado un objeto que contiene el estado de su formulario. Para cambiarlo:
onChange={e => setText({...text, {index: e.target.value}})} No tengo muy claro cómo se supone que debe verse su objeto de estado en función de lo que tiene aquí, pero este es el patrón general que creo que está buscando. Es convencional usar los nombres de los campos como claves para obtener un objeto como {name: 'Joe', email: 'joe@joe.com'} o lo que sea.