Handling a change to Redux-Form data from container to component via props

I ended up realizing that I didn’t need to use context for this after all and used this pattern as an alternative.

import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { FieldArray, getFormValues } from 'redux-form' // import the action creator you need
import CountryPicker from '../components/CountryPicker'

class CountriesContainer extends Component {

  constructor(props) {
    super(props)
    this.state = { countries: props.formValues.countries }
  }

  static propTypes = {
    formValues: PropTypes.object
  }

  componentWillReceiveProps = (nextProps) => {
    if (nextProps.formValues && nextProps.formValues.countries !== this.props.formValues.countries) {
      this.setState({ countries: nextProps.formValues.countries })
    }
  }

  shouldComponentUpdate = (nextProps) => {
    if (nextProps.formValues) return (nextProps.formValues.countries !== this.props.formValues.countries)
  }

  handleCountryChange = () => this.setState({ countries: this.props.formValues.countries })

  render() {
    const { countries } = this.state
    const options = ['United States', 'Canada', 'Mexico']

    return (
      <div>
        <FieldArray component={CountryPicker}
          name='countries'
          options={options}
          selectedCountries={countries}
          onCountryChange={this.handleCountryChange}
        />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  const { countries } = state
  return {
    countries,
    formValues: getFormValues('countriesForm')(state)
  }
}
export default connect(
  mapStateToProps
)(CountriesContainer)

import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { List, Checkbox, Table } from 'semantic-ui-react'
import indexOf from 'lodash/indexOf'

class CountryPicker extends Component {
  constructor(props) {
    super(props)
    this.state = {
      options: props.options,
      selected: props.selectedCountries,
      fields: props.fields
    }
    this.handleCountryChange = this.handleCountryChange.bind(this)
  }

  static propTypes = {
    options: PropTypes.array.isRequired,
    selectedCountries: PropTypes.array.isRequired,
    fields: PropTypes.any,
    onCountryChange: PropTypes.func.isRequired
  }

  shouldComponentUpdate(nextProps) {
    if (nextProps.selectedCountries !== this.props.selectedCountries) {
      this.handleCountryChange()
      return true
    }
    return false
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      selected: nextProps.selectedCountries
    })
  }

  handleCountryChange() {
    this.props.onCountryChange(this.state.regionKey)
  }

  handleSelectAll = () => {
    const { options, selected, fields } = this.state
    let fieldsToAdd, fieldsToRemove
    if (selected.length === options.length) {
      // deselect all
      fieldsToRemove = selected.map((country) => indexOf(selected, country))

      // Making sure the removal of indices won't be affected by race conditions
      // by sorting them in descending order
      fieldsToRemove.sort((a, b) => b - a)
      fieldsToRemove.forEach((countryIndex) => fields.remove(countryIndex))
    } else {
      fieldsToAdd = options.reduce((result, country) => {
        if (indexOf(selected, country) === -1) result.push(country)
        return result
      }, [])
      fieldsToAdd.forEach((country) => fields.push(country))
    }
  }

  handleChange = (e, { value }) => {
    const { selected, fields } = this.state
    if (indexOf(selected, value) !== -1) {
      fields.remove(indexOf(selected, value))
    } else {
      fields.push(value)
    }
  }

  render() {
    const { options, selected } = this.state
    return (
      <Table compact>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>
              <Checkbox checked={options.length > 0 && selected.length === options.length} label='Countries'
                indeterminate={0 !== selected.length && selected.length < options.length} onChange={this.handleSelectAll} onClick={this.handleSelectAll}
                disabled={options.length === 0} />
            </Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>
              <List verticalAlign='middle' relaxed style={{ height: '180px', overflowY: 'auto' }}>
                {options.map((country, i) =>
                  <List.Item key={i}>
                    <List.Content>
                      <Checkbox label={country} name='countries' value={country} checked={indexOf(selected, country) !== -1} onChange={this.handleChange} />
                    </List.Content>
                  </List.Item>
                )}
              </List>
            </Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
    )
  }
}

export default CountryPicker