before.js

import React, { Component, Children } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { fetchPrograms } from '../../modules/loanPrograms'

class LoanProgramContainer extends Component {
  componentDidMount() {
    this.props.fetchPrograms()
  }

  render() {
    const { programsWithMeta: { isFetching, error, programs }, children } = this.props

    if (isFetching) {
      return (<div>Loading...</div>)
    }

    if (error) {
      return <div>{error}</div>
    }

    if (programs.length === 0) {
      return <div>No programs</div>
    }

    const chilrenWithProps = Children.map(children, child => {
      return React.cloneElement(child, { programs })
    })

    return <div>{chilrenWithProps}</div>
  }
}

const connectedLoanProgramContainer = connect(
  state => {
    const { loanPrograms } = state

    return { programsWithMeta: loanPrograms }
  }, { fetchPrograms })
(LoanProgramContainer)

export default connectedLoanProgramContainer