How to remove a DOM component in react

Question

I'm new to react, and I really don't understand how to make a component remove itself from the DOM.

Basically a component has an associated delete event and I want the component to delete itself after executing the process.

      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!');
    }
  }

[React main concept #7](https://reactjs.org/docs/conditional-rendering.html) — , Oct 07 '21 at 07:35
You stop rendering it in your app and it is unmounted from React's VirtualDOM, and eventually removed from the DOM. — Drew Reese, Oct 07 '21 at 07:37
You can find an answer here https://stackoverflow.com/questions/36985738/how-to-unmount-unrender-or-remove-a-component-from-itself-in-a-react-redux-typ — Zouhair Dre, Oct 07 '21 at 07:55

T.J. Crowder · Answer 1 · 2021-10-07T07:50:01.043

The component can't remove itself. You'd do this by telling the component's parent to remove it (to re-render without rendering the target component). There are a number of ways to do that. For instance, the parent could handle whatever event it is (a click or whatever) rather than the child handling it. Or the parent could pass a function to the child that the child uses when it knows it should be removed.

You can see this at work in any "To Do" tutorial for React. Here's a very basic unoptimized example where the parent passes a function to the child that the child uses to remove itself:

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>

How to remove a DOM component in react

1 Answers1