Debo agregar/eliminar la fila dinámicamente al hacer clic en el botón. Cuando agrego, se agrega correctamente, como cuando hay 1, 2, 3, 4 filas y cuando hago clic en Agregar en 2 filas, se agrega una nueva fila como 3. Pero cuando elimino una fila en particular, siempre se elimina la última fila. Aquí he pasado el índice del mapa, pero incluso entonces solo está eliminando el último elemento.
https://codesandbox.io/s/add-remove-items-p42xr?file=/src/App.js:0-1099
Aquí hay un fragmento de trabajo. Utiliza una ref para realizar un seguimiento de las identificaciones para evitar duplicados, y utiliza element.order como clave en lugar de índice. El método de remove se ha cambiado para usar una devolución de llamada pasada a setState y una llamada filter() para eliminar los elementos en función de la propiedad de order pasada.
const { useState, useRef } = React; const App = () => { const [formValues, setFormValues] = useState([ { order: 1, type: "", name: "", query: "" } ]); const id_index = useRef(1); let addFormFields = () => { setFormValues([ ...formValues, { order: (id_index.current += 1), type: "", name: "", query: "" } ]); }; let removeFormFields = (order) => { setFormValues(prev => prev.filter(element => element.order !== order)); }; return ( <div> {formValues.length ? formValues.map((element) => ( <div className="form-inline" key={element.order}> <label>{element.order}</label> <input type="text" name="hello" /> <button className="button add" type="button" onClick={() => addFormFields()} disabled={formValues.length >= 4} > Add </button> <button type="button" className="button remove" onClick={() => removeFormFields(element.order)} > Remove </button> </div> )) : null} </div> ); }; ReactDOM.render( <App />, document.getElementById("app") ); <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <div id="app"></div>Dos cosas que tienes que actualizar,
https://codesandbox.io/s/add-remove-items-forked-so-sqoqk?file=/src/App.js:378-394
Aquí está el enlace de codesanbox para su referencia.