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;
};