title: How to apply credit card formatting with input?
body: <p>In my React component, I've got input, where people should type their credit card number. I want to apply the special credit card format, i.e. spaces between every 4 numbers (like 4444 4444 4444 4444 etc.). I want to have this formatting directly and instantly at input during typing.</p>
  
  <p>What's important, I want to block the possibility of typing (and paste, and drag and any other possibility of input change) any other characters than numbers.</p>
  
  <p>Firstly, I've added to React's input onChange event function, which tests if the input contains only numbers. If so, onChange executes Formik's handleChange method. So now we're sure the input's value contains only letters.</p>
  
  <p>The problems come with data formatting. I've assigned to the input value a function, which returns formatted data. So now, instead of  <code>44444</code> in input's value property, I've got <code>4444 4</code> value.</p>
  
  <p>After this change, I can't type any other character, because <code>4444 4</code> value (with space between last characters) doesn't pass the test of containing only letters.</p>
  
  <p>I didn't manage with any other solution too. This one was the best I've thought about.</p>