Move hidden input into its own component

Author: jakezatecky

src/js/CheckboxTree.jsx

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import GlobalActions from './components/GlobalActions';
+import HiddenInput from './components/HiddenInput';
 import TreeNode from './components/TreeNode';
 import defaultLang from './lang/default';
 import iconsShape from './shapes/iconsShape';
@@ -296,34 +297,11 @@ class CheckboxTree extends React.Component {
     }
 
     renderHiddenInput() {
-        const { name, nameAsArray } = this.props;
+        const { checked, name, nameAsArray } = this.props;
 
-        if (name === undefined) {
-            return null;
-        }
-
-        if (nameAsArray) {
-            return this.renderArrayHiddenInput();
-        }
-
-        return this.renderJoinedHiddenInput();
-    }
-
-    renderArrayHiddenInput() {
-        const { checked, name: inputName } = this.props;
-
-        return checked.map((value) => {
-            const name = `${inputName}[]`;
-
-            return <input key={value} name={name} type="hidden" value={value} />;
-        });
-    }
-
-    renderJoinedHiddenInput() {
-        const { checked, name } = this.props;
-        const inputValue = checked.join(',');
-
-        return <input name={name} type="hidden" value={inputValue} />;
+        return name === undefined ? null : (
+            <HiddenInput checked={checked} name={name} nameAsArray={nameAsArray} />
+        );
     }
 
     render() {

src/js/components/HiddenInput.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import listShape from '../shapes/listShape';
+
+const propTypes = {
+    checked: listShape.isRequired,
+    name: PropTypes.string.isRequired,
+    nameAsArray: PropTypes.bool.isRequired,
+};
+
+function renderInputArray(name, checked) {
+    const inputName = `${name}[]`;
+
+    return checked.map((value) => (
+        <input key={value} name={inputName} type="hidden" value={value} />
+    ));
+}
+
+function HiddenInput({ checked, name, nameAsArray }) {
+    if (nameAsArray) {
+        return <>{renderInputArray(name, checked)}</>;
+    }
+
+    return <input name={name} type="hidden" value={checked.join(',')} />;
+}
+
+HiddenInput.propTypes = propTypes;
+
+export default HiddenInput;