CODEWITHSUNDEEP
reactjsreduxredux-formreact-redux-form
Anarion
Anarion

Reputation: 2534

redux-form, setting a field visibility based on other field value

I have a complex form, where visibility of some fields is dependent on the value of other fields. How is setting a field's visibility based on a value of other field done in redux-form?

const renderField = ({ input, label, type, display='flex',  meta: { touched, error } }) => (
    <div style={ { display: display }}>
      <label>{label}</label>
      <div>
        <input {...input} type={type} placeholder={label}/>
        {touched && error && <span>{error}</span>}
      </div>
    </div>
)



const renderMembers = ({ fields, meta: { touched, error } }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push({})}>Add Member</button>
      {touched && error && <span>{error}</span>}
    </li>
    {fields.map((member, index) =>
      <li key={index}>
        <button
          type="button"
          title="Remove Member"
          onClick={() => fields.remove(index)}/>
        <h4>Member #{index + 1}</h4>
        <Field
          name={`${member}.firstName`}
          type="text"
          component={renderField}
          label="First Name"/>
        <Field
          name={`${member}.lastName`}
          type="text"
          component={renderField}
          label="Last Name"/>
        <Fields names={[ `${member}.firstName`, `${member}.lastName` ]} component={renderFields}/>
        <FieldArray name={`${member}.hobbies`} component={renderHobbies}/>
      </li>
    )}
  </ul>
)

Upvotes: 4

Views: 3431

Answers (1)

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12882

Let's assume that you have a form with 2 fields:

const fields = [
  'foo',
  'bar'
]
reduxForm(
{
  form: 'AwesomeForm',
  fields
}
)(AwesomeForm)

To control a field visibility based on other field value in the <AwesomeForm/> component, you can set corresponding display value with inline styles. Just make a verification, that checks if other value satisfies needed conditions. Like: 

export const AwesomeForm = (props) => {
  return (
    <form onSubmit={props.handleSubmit}>
      <TextField
        {...props.fields.foo}     
      />
      <TextField
        {...props.fields.bar}
        style={{
          display: props.fields.name.foo === 'some value' ? 'none' : 'block',
        }}
      />

      <button
        type='submit'
        />

    </form>

  )
}

Upvotes: 2

Related Questions