React Cookbook

How to do it...

Let's create our controlled form by following these steps:

1. First, for the Todo List, we will create a new component called Todo into src/components/Todo/index.jsx. The skeleton we will use is shown in the following code:

import React, { Component } from 'react';import uuidv4 from 'uuid/v4';import './Todo.css';class Todo extends Component {  constructor() {    super();    // Initial state...    this.state = {      task: '',      items: []    };  }  render() {    return (      <div className="Todo">        <h1>New Task:</h1>        <form onSubmit={this.handleOnSubmit}>          <input value={this.state.task} />        </form>      </div>    );  }}export default Todo;

File: src/components/Todo/index.jsx

2. Remember that we need to add the component to our src/routes.jsx, as shown in the following ...