renderField(field) {
    // get meta values for touched and error from field.meta object
    const { meta: { touched, error } } = field;
    // define className based on values in field.meta touched and error
    const className = `form-group ${touched && error ? 'has-danger' : ''}`;

    return (
      <div className={className}>
        <label>{field.label}</label>
        <input
          className="form-control"
          type="text"
          {...field.input}
        />
        <small className="text-help">
          {/* only show field.meta.error after user has touched field */}
          {touched ? error : ''}
        </small>
      </div>
    );
  }
// render label and input for <Field> component
render label and input for  component
render label and input for component
renderField(field) {
    const { meta: { touched, error } } = field;
    const className = `form-group ${touched && error ? 'has-danger' : ''}`;
    return (
      <div className={className}>
        <label>{field.label}</label>
        <input
          className="form-control"
          type="text"
          {...field.input}
        />
        <small className="text-help">
          {}
          {touched ? error : ''}
        </small>
      </div>
    );
  }
renderField ( field ) { const { meta : { touched , error } } = field ; const className = ` ${ touched && error ? 'has-danger' : '' } ` ; return ( < div className = { className } > < label > { field . label } < / label > < input className = "form-control" type = "text" { ... field . input } / > < small className = "text-help" > { } { touched ? error : '' } < / small > < / div > ) ; }
render label and input for <Field> component
render label and input for <Field > component
// get meta values for touched and error from field.meta object // define className based on values in field.meta touched and error /* only show field.meta.error after user has touched field */