Creating Input Component

We are going to create an Input Field Component in this section. This component will display the label of the form along with errors corresponding to it below it.

Create a new folder called Components in the src folder and then create TextInput.jsx file in this folder.

Your directory structure should look like this:

Add the following text to TextInput.jsx: 

import React from "react";
import { useField } from "formik";
import { Label, Input } from "reactstrap";

export default function TextInput({ label, required, ...props }) {
  const [field, meta] = useField(props.name);

  return (
    <>
      <Label htmlFor={props.id || props.name}>
        {label}
        {required && <span className="text-danger"> *</span>}
      </Label>
      <br />
      <Input className="text-input" {...field} {...props} />
      {meta.touched && meta.error ? (
        <small className="text-danger m-2">{meta.error}</small>
      ) : null}
    </>
  );
}

useField() returns [formik.getFieldProps(), formik.getFieldMeta()] which can be used to show an error message if the field is invalid and it has been touched.

Our TextInput is ready, now we can proceed to making a subform.