component question

AddContact.js

import React, { Component } from 'react';
import { Consumer } from '../../context';
import TextInputGroup from '../../components/layout/TextInputGroup';
import uuid from 'uuid';

class AddContact extends Component {
  state = {
    name: '',
    email: '',
    phone: '',
    erros: {}
  };

  onSubmit = (dispatch, e) => {
    //prevents any browser defaults from submitting
    e.preventDefault();
    //destructuring inputs from state
    const { name, email, phone } = this.state;

    // Check for errors
    if (name === '') {
      this.setState({ errors: { name: 'Name is required' } });
    }
    if (email === '') {
      this.setState({ errors: { email: 'Email is required' } });
    }
    if (phone === '') {
      this.setState({ errors: { phone: 'Phone is required' } });
    }
    const newContact = {
      //generating uuid with uuid package
      id: uuid(),
      //using es6 key/value shorthand:
      name,
      email,
      phone
    };
    //dispatch gets called with action.type: 'ADD_CONTACT' - payload: newContact
    dispatch({ type: 'ADD_CONTACT', payload: newContact });

    //Clear State upon form submit
    this.setState({
      name: '',
      email: '',
      phone: '',
      errors: {}
    });
  };

  onChange = e =>
    this.setState({
      // targeting each input's name attribute, and then its value attribute
      [e.target.name]: e.target.value
    });

  render() {
    const { name, email, phone, errors } = this.state;

    return (
      //value = state
      <Consumer>
        {value => {
          const { dispatch } = value;
          return (
            <div className="card mb-3">
              <div className="card-header">Add Contact</div>
              <div className="card-body">
                <form onSubmit={this.onSubmit.bind(this, dispatch)}>
                  <TextInputGroup
                    label="Name"
                    name="name"
                    placeholder="Enter Name.."
                    value={name}
                    onChange={this.onChange}
                    error={errors.name}
                  />
                  <TextInputGroup
                    label="Email"
                    name="email"
                    type="email" //overriding the default type of text we set.
                    placeholder="[email protected]"
                    value={email}
                    onChange={this.onChange}
                    error={errors.email}
                  />
                  <TextInputGroup
                    label="Phone"
                    name="phone"
                    type="tel" //overriding the default type of text we set.
                    placeholder="xxx-xxx-xxxx"
                    value={phone}
                    onChange={this.onChange}
                    error={errors.phone}
                  />
                  <input
                    type="submit"
                    value="Add Contact"
                    className="btn btn-light btn-block"
                  />
                </form>
              </div>
            </div>
          );
        }}
      </Consumer>
    );
  }
}

export default AddContact;

TextInputGroup.js

import React from 'react';
import PropTypes from 'prop-types';

//destructure our expected input attributes as props:
const TextInputGroup = ({
  label,
  name,
  value,
  placeholder,
  type,
  onChange,
  error
}) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        //change attribute values to use our destructured values
        type={type}
        name={name}
        className="is-invalid form-control form-control-lg"
        placeholder={placeholder}
        value={value}
        onChange={onChange}
      />
      <div className="invalid-feedback">This is Wrong</div>
    </div>
  );
};

TextInputGroup.propTypes = {
  //defining required propTypes:
  label: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  placeholder: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  //NOTE onChange is a function, so it is required as such:
  onChange: PropTypes.func.isRequired
};

TextInputGroup.defaultProps = {
  // not distinguishing between text, email, tel input type attribute.
  type: 'text'
};

export default TextInputGroup;