Formik Custom component

form.jsx

import React from 'react';
import { Form, Formik } from 'formik';
import * as Yup from 'yup';
import { Button } from '../../../components/buttons';
import { InputField, SelectField } from '../../../components/Input/input';


export function Form() {
  return (
    <Formik
      initialValues={{
        name: "",
        price: 0,
        hours: 0,
      }}
      validationSchema={Yup.object({
        name: Yup.string().required(),
        price: Yup.number().typeError("price must be a number").required(),
        keywords: Yup.array().required(),
        hours: Yup.number().required(),
      })}
      onSubmit={editPackage}
    >
      {({ values }) => (
        <Form className="menu-form-container" id="menus">
          <div className="MenuHeader">
            <h2>Edit Package</h2>
          </div>

          <InputField type="text" name="name" label={`Name`} placeholder={`Lorem`} />
          <InputField type="text" name="price" label={`Price`} placeholder={`Price`} />

          <SelectField
            defaultValue={"Select Hour"}
            options={[
              { name: "All Time", id: 6 },
              { name: "Dinner", id: 5 },
              { name: "Lunch and Dinner", id: 4 },
              { name: "Lunch", id: 3 },
              { name: "Breakfast and Lunch", id: 2 },
              { name: "Breakfast", id: 1 },
            ]}
            label={"Hours"}
            name="hours"
          />

          <div className="handle-submit-btn-wrap">
            <div className="handle-save-btn-container">
              <Button
                useNetwork
                text="Save"
                borderRadius="5px"
                className="save-menu"
                type="submit"
              />
            </div>
            <br />
          </div>
        </Form>
      )}
    </Formik>
  );
}

humanize.js

/**
 * A function that converts a string to a human readable string.
 * It replaces hyphen and underscore with space.
 */
export default function humanize(str) {
  return str.replace(/[-_]/g, ' ');
}

input.jsx

import React from 'react';
import clsx from 'clsx';
import { ErrorMessage, Field, FieldArray, useField } from 'formik';

import { FaPlus } from 'react-icons/fa';
import ReactSelect from 'react-select';
import Switch from 'react-switch';
import humanize from '../../utils/humanize';

export const InputField = (props) => {
  const { name, label } = props;
  const [field, meta] = useField(props);
  return (
    <div className="appInputWrap">
      {label ? <label>{label}</label> : ''}
      <input
        {...field}
        {...props}
        className={clsx(props.className, {
          'input-error': meta.touched && meta.error,
        })}
      />
      <ErrorMessage name={name}>
        {(message) => <div className="error-message">{humanize(message)}</div>}
      </ErrorMessage>
    </div>
  );
};

export const SelectField = (props) => {
  const [field, meta] = useField(props);
  const { name, label, options, defaultValue } = props;
  return (
    <div className="appInputWrap">
      {label ? <label>{label}</label> : ''}

      <select
        {...field}
        {...props}
        className={clsx(props.className, {
          'input-error': meta.touched && meta.error,
        })}
        defaultValue={''}
      >
        <option key={'0'} value="" selected disabled>
          {defaultValue}
        </option>
        {options.map((data) => {
          return (
            <option key={data.id} value={data.id}>
              {data.name}
            </option>
          );
        })}
      </select>
      <ErrorMessage name={name}>
        {(message) => <div className="error-message">{humanize(message)}</div>}
      </ErrorMessage>
    </div>
  );
};