Hola, soy nuevo en JavaScript/React y actualmente estoy haciendo un proyecto para practicarlo más.
Tengo una lista de gastos con algunos gastos, todos con una identificación única almacenada como props.items , pero estoy tratando de agregar un botón de eliminación para que se elimine un gasto de props.items cuando se haga clic. ¿Hay alguna manera de eliminar un elemento de props.items con el uso de la identificación única?
Actualmente tengo esto donde idNumber es la identificación única enviada desde el componente secundario ExpenseItem
const onRemoveExpense = (idNumber) => { console.log("remove clicked", idNumber) console.log(props.items, "<- all items") } return ( <ul className='expenses-list'> {props.items.map((expense) => ( <ExpenseItem key={expense.id} value={expense.id} title={expense.title} amount={expense.amount} date={expense.date} removeExpense={onRemoveExpense} /> ))} </ul> ); }¡Gracias por la ayuda!
El mayor obstáculo que veo aquí es que su matriz de elementos no está en el estado del componente en cuestión: se pasa como accesorios. Por lo tanto, le gustaría definir su secuencia de comandos de eliminación en qué componente contiene los elementos en su estado de componente. Lo escribirías en algún lugar a lo largo de las líneas de:
const onRemoveExpense = (idNumber) => { this.setState((state, props) => { // get items from current state const { items } = state; // get a new array with only those items that do *not* have the id number passed const newItems = items.filter((item) => item.id !== idNumber); // return it to set the new state return newItems; }); }Obviamente, esto debería ajustarse a su estado específico y estructura de componentes. Luego pasaría esto como accesorio junto con los elementos al componente en cuestión y lo llamaría para activar una eliminación.
Para una función "ocultar" en lugar de eliminar una, puede intentar agregar un accesorio booleano que shown y luego cambiarlo al hacer clic.
Pero para eliminarlo, deberá tener sus elementos almacenados en el estado.
Podrías intentar algo como esto:
const [items, setItems] = useState(props.items) // set the initial state as `props.items` // (I'm assuming the code snippet you shared exists inside a functional component) const onRemoveExpense = (idNumber) => { console.log("remove clicked", idNumber) console.log(props.items, "<- all items") const newItems = items.filter(({ id }) => id !== idToDelete) setItems(newItems) } return ( <ul className='expenses-list'> {items.map((expense) => ( <ExpenseItem key={expense.id} value={expense.id} title={expense.title} amount={expense.amount} date={expense.date} removeExpense={() => onRemoveExpense(expense.id)} /> ))} </ul> ); } Sin embargo, podría estar olvidando algo: no he probado el código anterior. Es posible que necesite tener un useEffect() para que se vuelva a procesar correctamente cuando cambie el estado.
O puede administrar el estado en el componente que define items para este componente.