I am currently making a mock credit card input field for a project for school. However, there are a few issues that have come up.

1. I cannot type in the Card Number Field
2. I am not sure how to set the Date of Expiration to only take MM/YYYY
3. I am trying to make it so that the Security Code only takes numbers. When I set the type to number, the character limit is no longer in effect. When I set it to text, the character limit works but I can still type in letters.

​

Edit, fixed the input issue by matching name with the data.xxxx value

<div>
            <label htmlFor="ccn"> Card Number: </label> <br />
            <Form.Control
              value={data.creditCardNumber}
              type="text"
              label="ccn"
              placeholder="1234123412341234"
              onChange={handleInputChange}
              name="creditCardNumber"
              maxLength="16"
            ></Form.Control>
          </div>
          <div>
            <label htmlFor="doe"> Date of Expiration: </label> <br />
            <Form.Control
              value={data.dateOfExpiration}
              type="date"
              label="doe"
              placeholder="MM / YY"
              name="dateOfExpiration"
              onChange={handleInputChange}
            ></Form.Control>
          </div>
          <div>
            <label htmlFor="cvc"> Security Code: </label> <br />
            <Form.Control
              value={data.cvc}
              type="number"
              label="cvc"
              placeholder="123"
              onChange={handleInputChange}
              name="cvc"
              maxLength="3"
            ></Form.Control>
          </div>
</div>