Este es mi archivo Add_Blog.js
import React, { useState } from "react"; function AddBlogs() { const ADD = () => { return ( <div> <label>Topic</label> <input></input> <label>Content</label> <textarea></textarea> <button type="button" onClick={deleteContent} value={state.length}> Delete</button> </div> ); } const [state, setState] = useState([<ADD key="first"></ADD>]); const addblog = () => { setState([...state, <ADD key={state.length}></ADD>]) } const deleteContent = (event, key) => { setState([...state, state.splice(event.target.value, 1)]); } return ( <div> <form> <div> <label>Add Title</label> <input></input> </div> <div> { state } </div> <div> <button type="button" onClick={addblog}>Add another topic</button> </div> <input type="submit" value="publish"></input> </form> </div> ); } export default AddBlogs;Mi expectativa de este código es eliminar el componente a la izquierda del botón Eliminar cuando presiono ese botón Eliminar. Pero cuando presiono el botón Eliminar, elimina ese componente y todos los componentes debajo de él. ¿Alguna solución para esto?
No funciona porque está utilizando mal el método de empalme . Devuelve el valor eliminado.
Puede cambiar su función deleteContent de esta manera:
const deleteContent = (event, key) => { let indexToRemove = Number(event.target.value); setState((prevState) => prevState.filter((elem, index) => index !== indexToRemove)); }Eso será suficiente para que el programa funcione como se espera.