Soy nuevo en reaccionar, y realmente no entiendo cómo hacer que un componente se elimine del DOM.
Básicamente, un componente tiene un evento de eliminación asociado y quiero que el componente se elimine solo después de ejecutar el proceso.
async delete(){ let request=await fetch('/admin/delete-product', {method: 'DELETE', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({productName: this.state.name})}); let response=await request.json(); if (response.result==='Sucess!'){ alert('The product has been deleted!'); //How delete the component from the DOM? } else{ alert('Error. Try again!'); } }El componente no se puede quitar solo . Haría esto diciéndole al padre del componente que lo elimine (para volver a renderizar sin renderizar el componente de destino). Hay varias formas de hacerlo. Por ejemplo, el padre podría manejar cualquier evento que sea (un clic o lo que sea) en lugar de que el niño lo maneje. O el padre podría pasar una función al niño que el niño usa cuando sabe que debe eliminarse.
Puede ver esto en funcionamiento en cualquier tutorial de "To Do" para React. Aquí hay un ejemplo muy básico no optimizado donde el padre pasa una función al hijo que el hijo usa para eliminarse a sí mismo:
const {useState, useCallback} = React; const Todo = ({todo, remove}) => { return <div> {todo.text} <span className="delete" onClick={() => remove(todo.id)}>X</span> </div>; }; let nextId = 1; const defaultTodos = [ {text: "This", id: ++nextId}, {text: "That", id: ++nextId}, {text: "The other", id: ++nextId}, ]; const TodoList = () => { const [todos, setTodos] = useState(defaultTodos); const [text, setText] = useState(""); const addTodo = useCallback(() => { setTodos(todos => [...todos, {text, id: nextId++}]); setText(""); }, [text]); const removeTodo = useCallback(id => { setTodos(todos => todos.filter(todo => todo.id !== id)); }, []); const textChange = event => { setText(event.target.value); }; return <div> <div>{todos.length ? todos.map(todo => <Todo key={todo.id} todo={todo} remove={removeTodo} />) : <em>(Nothing to do!)</em> }</div> <hr/> <div> <input type="text" value={text} onChange={textChange} /> <input type="button" value="Add" onClick={addTodo} disabled={!text} /> </div> </div>; }; ReactDOM.render(<TodoList />, document.getElementById("root")); .delete { float: right; cursor: pointer; } <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>