Tengo este componente que agrega un div y sus elementos al dom al hacer clic en el botón. La parte de agregar funciona bien como se esperaba, pero el problema surge cuando quiero eliminar.
En este momento, cuando hago clic en el botón Eliminar, elimina el elemento pero no elimina ese elemento específico al que está asociado el botón. Simplemente elimina el div de la parte superior o inferior.
He estado tratando de eliminar ese div específico cuyo botón se ha hecho clic para eliminar. ¿Cómo puedo lograr eso?
Aquí está el CodeSandbox .
Y aquí está el código:
import { useState } from "react"; const App = () => { const [ counter, setCounter ] = useState( 1 ); const handleAddDiv = () => { setCounter( counter + 1 ); }; const handleRemoveDiv = () => { setCounter( counter - 1 ); }; return ( <div className="App"> { Array.from(Array( counter )).map(( item, idx ) => ( <div> <div> <input type="text" /> <button onClick={handleRemoveDiv}>Remove</button> </div> </div> )) } <button onClick={handleAddDiv}>Add</button> </div> ); } export default App;En primer lugar, debe mapear una matriz de elementos en lugar de un valor entero.
Por lo tanto, al hacer clic en el botón Agregar, debe insertar una ID única en la matriz de elementos donde cada ID denotaría un elemento que se representa en su aplicación.
Ahora, cuando haga clic en el botón Eliminar, deberá eliminar esa ID de la matriz de elementos, lo que resultaría en la "eliminación" de ese div de la aplicación.
En mi caso, he considerado la timestamp de tiempo como una identificación única, pero debería explorar otras opciones para generar identificaciones únicas. Trabajar con índices es anti patrón en React, especialmente cuando está mapeando una matriz en JSX, ya que encontraría problemas en un momento dado. Por lo tanto, es una buena idea mantener identificadores únicos.
Nota: la solución de Damian no es ideal ya que se evita la manipulación DOM en React.
const { useState, useCallback } = React; const Item = ({ id, removeDiv }) => { const clickHandler = useCallback(() => { removeDiv(id); }, [id, removeDiv]); return ( <div> <input type="text" /> <button onClick={clickHandler}>Remove</button> </div> ); }; const App = () => { const [items, setItems] = useState([]); const addDiv = useCallback(() => { // using timestamp as a unique ID setItems([...items, new Date().getTime()]); }, [items]); const removeDiv = useCallback((itemId) => { // filter out the div which matches the ID setItems(items.filter((id) => id !== itemId)); }, [items]); return ( <div className="app"> {items.map((id) => ( <Item key={id} id={id} removeDiv={removeDiv} /> ))} <button onClick={addDiv}>Add</button> </div> ); }; ReactDOM.render(<App />,document.getElementById("react")); .app { text-align: center; font-family: sans-serif; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>Esta no es la forma preferida de reacción de hacer las cosas, pero funcionará:
import "./styles.css"; import { useState } from "react"; const App = () => { const [counter, setCounter] = useState(1); const handleAddDiv = () => { setCounter(counter + 1); }; const removeNode = (idx) => document.getElementById(`id-${idx}`).remove(); return ( <div className="App"> {Array.from(Array(counter)).map((item, idx) => ( <div key={idx} id={`id-${idx}`}> <div> <input type="text" /> <button onClick={() => removeNode(idx)}>Remove</button> </div> </div> ))} <button onClick={handleAddDiv}>Add</button> </div> ); }; export default App;En general, si desea que se haga correctamente, entonces querrá mapear en una matriz real y tener cada elemento en la matriz ocho con una identificación única o simplemente usar el índice del mapa y luego, según el elemento en el que haga clic, escriba una función para eliminar de esa matriz nuestro elemento específico.
Usaría un estado de matriz en lugar de un estado de contador, porque de lo contrario no sabe qué elemento debe eliminarse.
import { useState } from "react"; import "./styles.css"; let counter = 1; export default function App() { const [array, setArray] = useState([0]); const handleAddDiv = () => { setArray((prev) => [...prev, counter++]); }; const handleRemoveDiv = (idx) => { var arrayCopy = [...array]; arrayCopy.splice(idx, 1);//remove the the item at the specific index setArray(arrayCopy); }; return ( <div className="App"> {array.map((item, idx) => ( <div key={item}> <div> <input type="text" /> <button onClick={()=>handleRemoveDiv(idx)} >Remove</button> </div> </div> ))} <button onClick={handleAddDiv}>Add</button> </div> ); } Cuando agrego un elemento nuevo, le doy el valor counter++ , porque lo usaré como clave, y una clave debe ser única.