Skip to content

Instantly share code, notes, and snippets.

@velotiotech
Created June 10, 2020 09:41
Show Gist options
  • Save velotiotech/471a6e4f4bafbf0ca7edb3538a9b7388 to your computer and use it in GitHub Desktop.
Save velotiotech/471a6e4f4bafbf0ca7edb3538a9b7388 to your computer and use it in GitHub Desktop.
import React, { useMemo } from 'react';
const RecursiveContainer = ({config, formik}) => {
const builder = (individualConfig) => {
switch (individualConfig.type) {
case 'text':
return (
<>
<div>
<label htmlFor={individualConfig.field}>{individualConfig.label}</label>
<input type='text'
name={individualConfig.field}
onChange={formik.handleChange} style={{...individualConfig.style}} />
</div>
</>
);
case 'number':
return (
<>
<div>
<label htmlFor={individualConfig.field}>{individualConfig.label}</label>
<input type='number'
name={individualConfig.field}
onChange={formik.handleChange} style={{...individualConfig.style}} />
</div>
</>
)
case 'array':
return (
<RecursiveContainer config={individualConfig.children || []} formik={formik} />
);
default:
return <div>Unsupported field</div>
}
}
return (
<>
{config.map((c) => {
return builder(c);
})}
</>
);
};
export default RecursiveContainer;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment