Если очень коротко, про массив components из json-a:
1) Делаешь сами компоненты, кладёшь их в папку, условно, components
2) В components/index.js пишешь именованные экспорты этих компонентов, имя экспотра должно совпадать с type у объектов в json-e. Пример:
// index.js
export { default as GalleryComponent } from './GalleryComponent';
export { default as GridComponent } from './GridComponent';
3) Перебираешь массив компонентов, на каждой итерации "выбираешь" по полю type, какой компонент отрисовывать
import AllComponents from 'components/index'; // index можно не указывать, оставил для наглядности
....
// где-то в методе render:
const componentFromJson; // условно, это твой объект из JSON-a
const CurrentComponent = AllComponents[componentFromJson.type];
return (
<CurrentComponent metadata={ componentFromJson.metadata } /> // пропс metadata только для примера, не забудь прокинуть остальные данные из JSON-a через пропсы
);
Я думаю, метод понятен, как выводить под-компоненты для GridComponent можно разобраться самому
Теперь про форму. У тебя есть массив fields. Его нужно разбить на два массива main и additional, насколько я понимаю. И просто вывести эти массивы в двух разных блоках, через input-ы.
Можешь попробовать сам, если не получится - закинь свой код в
codesandbox и кинь на него ссылку, так будет проще помочь.
