Example showing how to use a formValueSelector on an individual array item

FieldArraysForm.js

/**

The following can replace the file in the Field Arrays example
(https://github.com/erikras/redux-form/tree/master/examples/fieldArrays) to demonstrate this functionality.

**/
import React from 'react'
import { connect } from 'react-redux'
import { Field, FieldArray, reduxForm, formValueSelector } from 'redux-form'
import validate from './validate'

const selector = formValueSelector('fieldArrays')

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

let Member = ({ member, index, fields, hasLastName }) =>
  <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"/>
    {hasLastName && <div>HAS LAST NAME</div>}
    <FieldArray name={`${member}.hobbies`} component={renderHobbies}/>
  </li>

Member = connect(
  (state, props) => ({
    hasLastName: !!selector(state, `${props.member}.lastName`)
  })
)(Member)

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) =>
      <Member member={member} fields={fields} index={index} key={index}/>)}
  </ul>
)

const renderHobbies = ({ fields, meta: { error } }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push()}>Add Hobby</button>
    </li>
    {fields.map((hobby, index) =>
      <li key={index}>
        <button
          type="button"
          title="Remove Hobby"
          onClick={() => fields.remove(index)}/>
        <Field
          name={hobby}
          type="text"
          component={renderField}
          label={`Hobby #${index + 1}`}/>
      </li>
    )}
    {error && <li className="error">{error}</li>}
  </ul>
)

const FieldArraysForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field name="clubName" type="text" component={renderField} label="Club Name"/>
      <FieldArray name="members" component={renderMembers}/>
      <div>
        <button type="submit" disabled={submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values
        </button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'fieldArrays',     // a unique identifier for this form
  validate
})(FieldArraysForm)

Why the !! on

!!selector(state, `${props.member}.lastName`)

It wasn't working for me and I tried removing the double ! and it worked.

Thanks for the example 👍

@erikras Thanks this works great... I do have one additional question if either of you might be able to help.

any thoughts on how to dispatch a change based on this?

I converted Member to a class and am trying to do something like this.

componentDidUpdate(prevProps, cabinets) {
    if (this.props.name != prevProps.name){
      this.props.dispatch(change('FieldArraysForm', `${member}.lastName`, this.props.name));
    }
}

I'm hoping to programmatically populate the correct instance of the FieldArray

Any thoughts?

Hello All,
This is a great job. However I would like to know if there an development effort to get that on react-native?
Thank you!

thank you so much! The code is improving the performance of page for not re-rendering that much.

thanks this helped me fix my form issues, on which i have been stuck for few days

@erikras,
I have a FieldArray , where I need to do some calculation like when I fill in 2 text boxes , it should validate 2 values for numbers and calculate substraction and populate the result in third text box. Can you please let me know how can we do that and give any pointers/link on the same. Thank you.