Creating form elements with events

You may have noticed in the previous chapter that we used some simple forms with events, but in this recipe, we will see this topic in more depth. In Chapter 6, Creating Forms with Redux Form, we are going to learn how to handle forms with Redux Form.

 

How to do it...

Let's create a new component called Person:

1. The skeleton we are going to use for this component is as follows:

  import React, { Component } from 'react';
import './Person.css';

class Person extends Component {
constructor() {
super();

      this.state = {
        firstName: '',
        lastName: '',
        email: '',
        phone: ''
      };
    }

render() {
return (
        <div className="Person">

        </div>
      );
    }
  }

export default Person;

File: src/components/Person/Person.js

2. Let's add the firstName, lastName, email, and phone fields to our form. The render method should look like this:

render() {
return (
      <div className="Person">
        <form...