Estoy tratando de crear un botón Agregar div y un botón Eliminar div. Cuando selecciona un cierto div y hace clic en eliminar, quiero eliminar solo esa clave del objeto. El problema es cuando elimino y luego trato de crear un nuevo div, ya no crea los nuevos divs... No estoy seguro de lo que estoy haciendo mal o por qué solo funciona.
import "./styles.css"; import { useEffect, useState } from "react"; // The parent component const App = () => { const [textBoxDivs, setTextBoxDivs] = useState({}); const addNewTextBox = () => { const numOfTextBoxDivs = Object.keys(textBoxDivs).length; console.log(numOfTextBoxDivs, "num"); setTextBoxDivs({ ...textBoxDivs, [`div${numOfTextBoxDivs + 1}`]: { isSelected: false, innerText: "text" } }); }; const selectItem = (e) => { const nextState = { ...textBoxDivs }; Object.keys(nextState).forEach((k) => { nextState[k].isSelected = false; }); nextState[e.target.id].isSelected = true; setTextBoxDivs(nextState); }; const removeSelectedItem = () => { const nextState = { ...textBoxDivs }; if (Object.keys(textBoxDivs).length > 0) { Object.keys(textBoxDivs).map((key) => { if (textBoxDivs[key].isSelected) { delete nextState[key]; return setTextBoxDivs(nextState); } return null; }); } }; return ( < div > < button onClick = { () => addNewTextBox() } > Click me to create a selectable div < /button> < button onClick = { (e) => removeSelectedItem(e) } > Click me to delete a selectable div < /button> { Object.keys(textBoxDivs).length > 0 && Object.keys(textBoxDivs).map((key, index) => { return ( < div style = { { border: textBoxDivs[key].isSelected ? "2px solid green" : "unset" } } onClick = { (e) => selectItem(e) } key = { index } id = { key } > { textBoxDivs[key].innerText } < /div> ); }) } < /div> ); }; export default App; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>El problema en su código en la función addNewTextBox, específicamente en la línea
[`div${numOfTextBoxDivs + 1}`]: {Porque no significa necesariamente que esté agregando una nueva línea. En este caso, está asignando un valor a (div + número), pero a veces eso ya existe. Por ejemplo, si cambias esa línea por un número verdaderamente único, como la fecha, funciona:
const addNewTextBox = () => { const numOfTextBoxDivs = Object.keys(textBoxDivs).length; console.log(numOfTextBoxDivs, "num"); setTextBoxDivs({ ...textBoxDivs, [`div${new Date().getTime()}`]: { isSelected: false, innerText: "text" } }); };Actualice selectItem () y luego funciona:
const selectItem = (e) => { const nextState = { ...textBoxDivs, setTextBoxDivs }; // setTextBoxDivs was missing Object.keys(nextState).forEach((k) => { nextState[k].isSelected = false; }); nextState[e.target.id].isSelected = true; setTextBoxDivs(nextState); };