React Redux Form v0.10.0

🆕 The <Errors> Component

From #124, the <Errors> component is now available in RRF to make displaying errors even easier. Even for the simplest cases, displaying error messages can get pretty verbose, and <Errors> greatly simplifies this:

// Before...
<div>
{ userForm.fields.email.touched
  && userForm.fields.email.errors.isRequired
  && <span>Email address is required</span>
}

// ... etc. for other errors
</div>

// After...
<Errors model="user.email"
  messages={{
    isRequired: 'Email address is required',
    isEmail: 'Must be a valid email address',
  }}
  show="touched"
/>

This will render the following HTML, depending on what the errors are:

<div>
  <span>Email address is required</span>
  <span>Must be a valid email address</span>
</div>

The full spec:

<Errors
  model="user.email" // string or model getter function, just like Field
  messages={{...}} // map - <validation key>: <message or function> (string or JSX)
  show="touched" // string or object or function that takes field object as arg.
  wrapper="div" // string or component class for container
  component="span" // string or component class for each child error
/>

🆕 Model Getters with track()

The new track(model, predicate) function returns a function that, when called with state, will return the first full model string (with the sub-model) that matches the predicate iteratee.

For example:

const team = {
  users: [
    { name: 'Alice' },
    { name: 'Bob' }
  ]
};

const isBob = (item) => item.name === 'Bob';

track('users', isBob)(users);
// => 'users.1'

Also, you can use lodash iteratee shorthands as the predicate! So the above can be shortened:

track('users', {name: 'Alice'})(users);
// => 'users.0'

track() and <Field> 🏃

How is track() useful? Now, the <Field model={...}> property accepts two types:

• a string, such as model="users.1"
• a model getter, such as model={track('users', isBob)}, which is called with the state returned by store.getState().

Why is this beneficial? If the model you want to track is part of a collection that changes over time, such as by adding/removing items, shuffling, sorting, etc., the model itself will also change over time. That means that users.0 might be users.3 after rearranging, for example.

// This will ALWAYS reference the model where the user.id === 10
<Field model={track('users[].name', {id: 10})}>
  <input type="text" />
</Field>

track() and Model Getter Support

Model Getters are supported in all of these components:

• <Field model={...}>
• <Form model={...}>
• <Errors model={...}>