JSFiddle - React, Tailwind, and code Playground

by brigand

JavaScript

const form = [
{
    layout: 'column',
    fields: [{
        id: 'testdropdown',
        type: 'dropdown',
        label: 'test dropdown',
        options: [{
            value: 'test',
            label: 'test'
          },
          {
            value: 'test2',
            label: 'test2'
          },
        ],
        required: true,
      },
      {
        id: 'water',
        type: 'buttons',
        options: [{
            value: '1',
            label: 'I drink like a fish (over a gallon a day)'
          },
          {
            value: '2',
            label: 'A couple of glasses dayest'
          },
          {
            value: '3',
            label: 'I don’t drink water. I’m a camel.'
          },
        ],
        required: true,
      },
      {
        id: 'testinput',
        type: 'input',
        label: 'test input',
        required: true,
      },
    ],
  },
  {
    layout: 'column',
    fields: [{
      id: 'testinputSecondRow',
      type: 'input',
      label: 'test input',
      required: true,
    }, ],
  },
]

const getInputIds = fields => fields
	.filter(field => field.type !== 'buttons')
  .map(f => f.id);

const entries = form
  .flatMap(cur => getInputIds(cur.fields))
  .map(id => [id, form[id] || '']);
  
const initialPreSubmitFields = Object.fromEntries(entries)

console.log(initialPreSubmitFields)

/*
output should stay:
{
	testdropdown: ""
	testinput: ""
	testinputSecondRow: ""
}

*/