How to insert a component on button click?

Question

React

I'm making a todo application and I'm stuck because I can't implement the intended logic.

function Title(props) {
    return (
        <input type="text" value={props.title}/>
    )
}
function Task(props) {
    return (
        <input type="text" value={props.task}/>
    )
}
function Done(props) {
    return (
        <input type="checkbox"/>
    )
}
function Remove(props) {
    return (
        <button onClick={props.onClick}>X</button>
    )
}
class ItemTodo extends React.Component {
    constructor() {
        super();
        this.deleteItem = this.deleteItem.bind(this);
    }
    deleteItem(event) {
        event.target.parentNode.parentNode.removeChild(event.target.parentNode);
    }
    render() {
        return (
            <div className="itemTodo">
                <Title value={this.props.title}/>
                <Task value={this.props.task}/>
                <Done done={this.props.isDone}/>
                <Remove onClick={this.deleteItem}/>
            </div>
        )
    }
}
export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            title: 'Title',
            task: 'Message',
            isDone: false,
        };
        this.postItem = this.postItem.bind(this);
        this.addItem = this.addItem.bind(this);
        this.valueTitle = this.valueTitle.bind(this);
        this.valueText = this.valueText.bind(this);
    }
    valueTitle(event) {
        this.setState({
            title: event.target.value,
        })
    }
    valueText(event) {
        this.setState({
            task: event.target.value,
        })
    }
    addItem() {
        this.setState({
            isDone: !this.state.isDone,
        });
    }
    postItem() {
       //Этим методом нужно реализовать так, чтобы при нажатии на клавишу компонент ItemTodo вставлялся в div с классом block-todo
        const block = document.querySelector('.header-block');
        return <ItemTodo/>
    }
    render() {
        return (
                <div>
                    <div className="header-app">
                        <h1>My ToDo app with React</h1>
                        <button onClick={this.addItem}>+</button>
                        <div className="header-block">
                            <input id="title" type="text" placeholder="title" onChange={this.valueTitle}/>
                            <input id='task' type="text" placeholder="task" onChange={this.valueText}/>
                            <input id='submit' type="submit" value="Add"
                                    onClick={this.postItem}
                            />
                        </div>
                     </div>
                    <div className="body-app">
                        <div className="block-todo">
                        </div>
                    </div>
                    <div className="footer-app">
                        Footer
                    </div>
            </div>
        )
    }
}

I left an explanation in the code in the comments. Correct me if I'm wrong somewhere

Answer 1

You don't need to work directly with the DOM as you often do with jquery code.
Think like this: you have a mutable state (a different number of "things" for the to-do list) - it can (and in your task, I think it should) be stored in the state of the component (for example, in this.state.todos = [ todo1, todo2, todo3 ...])
In the render function, you need to run over this.state .todos and generate markup...
On the add button, you need to set this.state.todos to a new array, which will have one more element. At the same time, since the state changes, the render function will be called, and since it generates markup depending on what is in this.state.todos, you will get 1 more element. And so in a circle.
Deletion and editing are implemented in the same way. You always change something in state, react re-renders the component and its children for you - you get the actual state.