How to give automatic spaces in credit card validation, slash in a date format validation using yup and formik

Question

I am facing an issue that giving automatic space between numbers of credit cards validation like 1236 5478 4563 4563 and an automatic slash between date format validation like MM/YY by using yup and formik. Here is the required link for formik.

I want this:

I am getting this:

Answer 1

I haven't used Formik but I think you can define how your form values renders.

import React, {Component} from 'react';
import { Formik } from 'formik';


class Card extends Component {
    state = {
        cardNumber: '',
        expiryDate: ''
    }


    addGaps(str, gapNo) {
        let newStr = " ";
        let len = str.length;
        for (let i = 0; i<len; i++) {
            newStr = newStr + str[i];
            while(newStr.length % (gapNo+1) === 0) {
                newStr = newStr + " ";
            } 
        }
        return newStr.trim(" ");
    }

    addSlash(str) {
        let newStr = "";
        let len = str.length;
        for (let i = 0; i<len; i++) {
            newStr = newStr + str[i];
            while(newStr.length % 2 === 0) {
                newStr = newStr + "/";
            } 
        }
        return newStr.substr(0, newStr.length-1);
    }

    render() {
    return (
        <div>
            <h1>Card</h1>
            <Formik
                initialValues={{ cardNumber: this.state.cardNumber, expiryDate: this.state.expiryDate }}
                onSubmit={//Submit your state not formatted values}
                render={() => (
                    <form onSubmit={this.handleSubmit //submit the values in this.state}>
                        <input
                            type="text"
                            onChange={this.handleChange //set card Number in this.state}
                            onBlur={this.handleBlur}
                            value={this.addGaps(this.state.cardNumber, 4)}
                            name="cardNumber"
                        />
                       <input
                           type="text"
                           onChange={this.handleChange}
                           onBlur={this.handleBlur}
                           value={this.addSlash(this.state.expiryDate)}
                           name="expiryDate"
                       />
                      {this.errors.name && <div id="feedback">{this.errors.name}</div>}
                      <button type="submit">Submit</button>
                  </form>
              )}
          />
      </div>
    );
    }
}