Add getInputArray util and use it to initialize this.state.input

Author: acusti

src/ReactCodeInput.js

@@ -7,7 +7,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { uuidv4 } from './utils';
+import { getInputArray, uuidv4 } from './utils';
 
 const BACKSPACE_KEY = 8;
 const LEFT_ARROW_KEY = 37;
@@ -32,23 +32,17 @@ class ReactCodeInput extends Component {
   constructor(props) {
     super(props);
 
-    const { fields, forceUppercase } = props;
     let value = props.value || '';
 
-    if (forceUppercase) {
+    if (props.forceUppercase) {
       value = value.toUpperCase();
     }
 
     this.state = {
       value,
-      input: [],
+      input: getInputArray(props),
     };
 
-    for (let i = 0; i < Number(fields) && i < 32; i += 1) {
-      const value = this.state.value[i] || '';
-      this.state.input.push(value);
-    }
-
     this.textInput = [];
 
     this.uuid = uuidv4();

src/utils.js

@@ -3,4 +3,10 @@ export const uuidv4 = () => {
         let r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
         return v.toString(16);
     });
-};
+};
+
+export const getInputArray = ({ fields, value }) => {
+  fields = Math.min(32, fields);
+  value = value || '';
+  return Array.from(Array(fields)).map((_, index) => value[index] || '');
+};