Форма Redux: отображение пользовательского компонента в зависимости от значения поля

Question

У меня есть FieldArray:

<FieldArray name="elements" component={renderFiles}/>

Данные:

[
  {name:'xxx', url:'www.xxx.com', isRepeat: true},
  {name:'yyy', url:'', isRepeat: false},
  {name:'zzz', url:'', isRepeat: false}
]

Мне нужно отобразить SwitchField в зависимости от URL имеет значение

const renderFiles = ({ fields }) => {
   return (
      <div>
        {fields.map((element, index) =>
          <div key={'preview-wrap-'+index}>
            <Field
              name={`${element}.name`}
              type="text"
              component={TextField}/>
            { element.url ? 
              <Field 
              name={`${element}.isRepeat`} 
              component={SwitchField} 
              change={() => { console.log('change')}}/> :
              '' 
            }
        </div>
      )}
    </div>
  )
}

TextField и SwitchField являются пользовательскими компонентами реагирующего инструментария:

const TextField = ({ input, label, theme, meta: { touched, error }, ...custom }) => (
  <Input type='text' label={label} error={touched ? error : ''} {...input} {...custom} theme={{error:'text-error', ...theme}} />
)

const SwitchField = ({ input, label }) => (
  <Switch checked={!!input.value} label={label} onChange={(value) => {console.log('change')}} {...input} />
)

Answer 1

Возможно, я не совсем понял вашу проблему, поскольку она довольно проста, но вместо:

{ element.url ? <Field component={SwitchField} .../> : "" }

Вы можете просто сделать:

{ 
element.url 
  ? <Field component={SwitchField} .../>
  : <Field component={TextField} .../>
}