Show/hide field based on the value of another field using redux-form

Question

I have a Field which I want to hide based on the value of another Field. For this I am right now using the warn props as I can get the current value as well as the values of other fields in the form.

Is it possible to create custom props ( similar to warn and validate) that can take the current field's value and all the values of the form as arguments?

What are other approaches I can do to hide/show a field based on value of another field using redux-form?

Answer 1

You can use Fields component for this. It handles the state of various fields under a single component.

Example:

// outside your render() method
const renderFields = (fields) => (
  <div>
    <div className="input-row">
      <label>Category:</label>
      <select {...fields.category.input}>
        <option value="foo">Some option</option>
      </select>
    </div>
    { fields.category.input.value && (
      <div className="input-row">
        <label>Sub category</label>
        <select {...fields.subcategory.input}>
          <option value="foo">Some other option</option>
        </select>
      </div>
    )}
  </div>
)

// inside your render() method
<Fields names={[ 'category', 'subcategory' ]} component={renderFields}/>