React todo app, problem with removing task

Question

I'm working on todo app in React and I have weird problem. I created onClick effect on trash icon to remove whole task component. The thing is, sometimes it works (removes whole task), sometimes not (removes only icon). I tried different solutions but to be honest I have no idea why it works like this, this is the same script working differently in different components, for some reason.

main component:

import React from 'react'
import TaskContainer from './TaskContainer.js';
import SingleTask from './SingleTask'

class AppContainer extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            children: [],
            numChildren: 0,
            newMessage: "What to do next?"
        }
        this.onAddChild = this.onAddChild.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }

    onAddChild = (msg) => {
        let newArray = this.state.children.concat(<SingleTask message={msg} />);

        this.setState({ children: newArray });
        console.log(this.state.children)
    }

    handleChange(event) {
        this.setState({ newMessage: event.target.value })
    }

    render() {
        return (
            <div className="app-container">
                <div className="new-task-container">
                    <input type="text" id="taskInput" defaultValue="What to do next?"
                        maxlength="50" onChange={this.handleChange} />
                    <div className="addTask" id="addTask" onClick={
                        () => {
                            let text = document.getElementById("taskInput").value;
                            this.setState({ newMessage: text })
                            this.onAddChild(this.state.newMessage);
                        }
                    }>
                        <div className="add-button">Add task</div>
                    </div>
                </div>
                <TaskContainer>
                    {this.state.children}
                </TaskContainer>
            </div>
        )
    }
}
export default AppContainer

child component

import SingleTask from './SingleTask.js';

function TaskContainer(props) {
    return (
        <div className="task-container">
            {props.children}
        </div>
    )
}

export default TaskContainer 

child's child component - SingleTask

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTrashAlt } from '@fortawesome/free-regular-svg-icons'

class SingleTask extends React.Component {
    constructor(props) {
        super(props)
        this.state = { active: true }
    }
    render() {
        return (
            <div className="singleTask" >
                <p>{this.props.message}</p>
                <div className="removeTask" onClick={(event) => {
                    setTimeout(() => {
                        event.target.parentNode.parentNode.remove()
                    }, 350)
                }
                }>
                    <FontAwesomeIcon icon={faTrashAlt} />
                </div>
            </div>
        )
    }
}

export default SingleTask

thanks in advance

Answer 1

I create a CodeSandbox with all the necessary corrections.

https://codesandbox.io/s/upbeat-jang-v7jvm

Piece of advice: When using React is not recommend that you modify the DOM by yourself.