Creating a controlled form with the local state

For this recipe, we are going to create a simple Todo List to use a form using our local state.

Getting ready

For this recipe, we need to install the uuidpackage to generate random IDs, as shown in the following code:

npm install uuid

 

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...