Estoy tratando de crear un formulario donde los campos de entrada se puedan generar dinámicamente. Mientras se ejecuta, se ejecuta pero reacciona y arroja una advertencia sobre no ser un componente controlado. Cualquier ejemplo para la solución que busco en línea usa clases y constructores, ¿hay alguna otra forma de hacerlo sin usar clases?
import { useState } from 'react'; function Try() { const [formFields, setFormFields] = useState([ { StepNo: '', StepDisc: '' }, ]) const handleFormChange = (event, index) => { let data = [...formFields]; data[index][event.target.name] = event.target.value; setFormFields(data); } const submit = (e) => { e.preventDefault(); console.log(formFields) } const addFields = () => { let object = { StepNo: '', StepDiscs: '' } setFormFields([...formFields, object]) } const removeFields = (index) => { let data = [...formFields]; data.splice(index, 1) setFormFields(data) } return ( <div className=""> <form onSubmit={submit}> {formFields.map((form, index) => { return ( <div key={index}> <input name='StepNo' placeholder='StepNo' onChange={event => handleFormChange(event, index)} value={form.StepNo} /> <input name='StepDisc' placeholder='StepDisc' onChange={event => handleFormChange(event, index)} value={form.StepDisc} /> <button onClick={() => removeFields(index)}>Remove</button> </div> ) })} </form> <button onClick={addFields}>Add More..</button> <br /> <button onClick={submit}>Submit</button> </div> ); } export default Try;No está relacionado con el error que tiene, pero le sugiero que vincule la clave a una clave única, ya que puede generar problemas impredecibles cuando elimina los elementos.
const addFields = () => { // Id should has a unique a id to be used in as a key. const id = generateUniqueKey() let object = { StepNo: '', StepDiscs: '', id } setFormFields([...formFields, object]) } {formFields.map((form, index) => { return ( <div key={form.id}> <input name='StepNo' placeholder='StepNo' onChange={event => handleFormChange(event, index)} value={form.StepNo} /> <input name='StepDisc' placeholder='StepDisc' onChange={event => handleFormChange(event, index)} value={form.StepDisc} /> <button onClick={() => removeFields(index)}>Remove</button> </div> ) })}Solo hay un error tipográfico en su código cuando inicializa nuevos datos de formulario al agregar. En vez de
let object = { StepNo: '', StepDiscs: '' }Debería ser
let object = { StepNo: '', StepDisc: '' }Necesitas cambiar StepDiscs a StepDisc :-)
const addFields = () => { let object = { StepNo: '', StepDiscs: '' }