Redux Form: Display a custom component depending field value

Question

I have a FieldArray:

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

Data:

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

I need to display the SwitchField depending url has a value

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 and SwitchField are custom components of react-toolbox:

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} />
)

what's the problem that you are facing? – Venugopal Jun 28 '17 at 18:02 — Venugopal, Jun 28 '17 at 18:02

score 0 · Answer 1 · answered Apr 27 '17 at 00:21

I might not have clearly understand your problem, since it's fairly straightforward but instead of having :

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

You can just do :

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

Redux Form: Display a custom component depending field value

1 Answers1