Как правильно создать компонент, содержащий несколько разных компонентов, в зависимости от значения переменной?

chemdev, да вот как раз от этого и пытаемся уйти
сейчас очень становится разновидностей полей и к каждому нужен свой подход - код получается супер громоздкий и трудночитаемый
в любом случае спасибо!
пока отвечал на твой вопрос появились еще идеи решения

Как правильно создать компонент, содержащий несколько разных компонентов, в зависимости от значения переменной?

chemdev, если я правильно понимаю твой вопрос, то

код, который определяет какой компонент нужно отрисовать

export const inputHandlerDetector = data => {
  const { type } = data
  if (inputTypeHandlers[type]) {
    return inputTypeHandlers[type]
  } return () => null
}

const inputTypeHandlers = {
  [INPUT_TYPES.comment]: commentFieldHandler,
  [INPUT_TYPES.employees]: employeesFieldHandler,
  [INPUT_TYPES.file]: fileFieldHandler,
  [INPUT_TYPES.period]: periodFieldHandler,
  [INPUT_TYPES.email]: emailFieldHandler,
  [INPUT_TYPES.float]: floatFieldHandler,
  [INPUT_TYPES.int]: intFieldHandler,
  [INPUT_TYPES.account]: bankAccountFieldHandler,
  [INPUT_TYPES.bik]: bikFieldHandler,
  [INPUT_TYPES.date]: dateFieldHandler,
  [INPUT_TYPES.time]: timeFieldHandler,
  [INPUT_TYPES.string]: stringFieldHandler,
  [INPUT_TYPES.text]: stringFieldHandler,
  [INPUT_TYPES.address]: stringFieldHandler,
  [INPUT_TYPES.phone]: phoneFieldHandler,
  [INPUT_TYPES.dropdown]: dropdownFieldHandler,
  [INPUT_TYPES.list]: dropdownFieldHandler,
}

компонент, для типа 'date' - dateFieldHandler

export const dateFieldHandler = data => {
const { fieldId, userData, value, touched, min, max, required, name, disabled } = data
const [error, setError] = useState('')
const restrictedDays = userData?.restrictedDays
const minValue = isUndefined(restrictedDays)? min : moment().add(restrictedDays, 'days').format('L')
const initialMonth = isUndefined(restrictedDays)? null : moment().add(restrictedDays, 'days')

const validate = useCallback(() => {
...
}, [required, value, fieldId])

useEffect(() => {
validate()
}, [value])

return (
...
/>
)
}

компонент для типа 'string' - stringFieldHandler

export const stringFieldHandler = data => {
const [error, setError] = useState('')
const { fieldId, id, matches, max, min, message, name, value, touched, setFieldValue, required, mask, disabled, type, typeName } = data

const validate = useCallback(() => {
....
}, [required, fieldId, value, id, matches, max, min, message])

useEffect(() => {
validate()
}, [value])

return (
...
/>
)
}

обработчики (stringFieldHandler и dateFieldHandler) возвращают компоненты, которые собираются в массив
в функции

composeForm

const composeForm = forms => {
const fields = getFileds(forms)
const formFields = fields?.reduce(
(acc, field) => {
const fieldId = getFieldId(field.id)
const value = data?.formValues?.customData[fieldId]
const touched = data?.touched?.customData && data?.touched?.customData[fieldId]
const fieldData = {
...field,
...data,
value,
touched,
fieldId,
}
if (inputHandlerDetector(fieldData)) {
return [...acc, inputHandlerDetector(fieldData)(fieldData)]
} else return acc
},
[])
return formFields
}
return composeForm(props.forms)

и отрисовываются в компоненте FormGenerator

Как правильно создать компонент, содержащий несколько разных компонентов, в зависимости от значения переменной?

Михаил Р., да, количество хуков изменяется при изменении количества компонентов, которые я хочу отрисовать в FormGenerator