klummy
12/5/2017 - 9:58 AM

renderFormFields.jsx

const renderFormFields = (fields) => {
    const formFields = [];

    fields.forEach((field, i) => {
        const Field = (
            // WARNING: Using Array index in keys is NOT a good idea but used here for brevity. See https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md
            <div key={i}>

                {/* Depending on your need and React version (>= v16.2.0), you can use React.Fragment. See - https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html */}
                {field.label && <label htmlFor={field.name}>{field.label}</label>}

                {renderField(field)}
            </div>
        );

        formFields.push(Field);
    });

    return formFields;
};