Let's start by creating a Todo form with a textbox to enter a description and add a button to add todo to the list:

render() {
     return (
         <div>
             <form>
                 <input placeholder="What do you want to learn today?">
                 </input>
                 <button type="submit">add</button>
             </form>
        </div>
    );
}

When you add a todo description and click the add button, we want to add the todo and show the list of todos in the page.

The list of todos changes as we add and delete todos. So, we represent a list of todos as part of the state of the component. The moving parts of the component are identified as part of its state. We add state with an empty list of todos to our component:

state = {
   todos: []
}

We can also update the todo component render method to loop around todos in the state and display them in a list:

render() {
    return (
        <div>
            <form>
                <input placeholder="What do you want to learn today?">
                </input>
                <button type="submit">add</button>
                <ul>
                    {
                        this.state.todos.map(
                            todo => <li key={todo.id}>{todo.desc}</li>
                        )
                    }
                </ul>
            </form>
        </div>

    );
}

The this.state.todos.map method loops around all todos and creates a li element for each of them.

When the user clicks add todo, we want to add todo to todos in state. We can add an event on the onSubmit form. this.addTodo will be defined in TodoComponent:

<form onSubmit={this.addTodo}>

To get the value of the todo textbox in TodoComponent, we add a reference to this._todoTextElement:

<input ref={(todoRef) => this._todoTextElement = todoRef} 
                     placeholder="What do you want to learn today?">

The constant is defined as follows:

const HARDCODED_USER_NAME = 'Jack'

The addTodo method is as follows:

addTodo(e) {

    var newTodo = {
        desc: this._todoTextElement.value,
        id: -1,
        targetDate: new Date(),
        user: HARDCODED_USER_NAME
    };

    this.setState((prevState) => {
        return {
            todos: prevState.todos.concat(newTodo)
        };
    });

    this._todoTextElement.value = "";

    e.preventDefault();
}

We are creating a new todo with a few hardcoded details and the description of todo is picked up from _todoTextElement using desc: this._todoTextElement.value.

To update the list of todos, we need to update the state. In React, you update state by using the setState method and providing the new values. We are using the previous state and concatenating the new todo:

this.setState((prevState) => {
    return {
        todos: prevState.todos.concat(newTodo)
    };
});

After that, we make the text element empty and prevent the from being submitted:

this._todoTextElement.value = "";
e.preventDefault();

In the addTodo method, we use this to refer to the current object. To enable this, we need to do a simple bind in the constructor—this.addTodo = this.addTodo.bind(this):

constructor(props) {
   super(props);
   this.addTodo = this.addTodo.bind(this);
}

When you refresh the page, you should be able to enter a description and click add todos. You can add multiple todos. The page is displayed as follows: