Redux Container vs Presentational

.js

// Component5.js
const Component5 = ({ props: {foo5, bar5}}) => (
  <div>
    <span>{foo5}</span>
    <span>{bar5}</span>
  </div>
)

// Component4.js
const Component4 = ({ props: {foo4, bar4}}) => (
  <div>
    <span>{foo4}</span>
    <span>{bar4}</span>
  </div>
)

// Component3.js
const Component3 = ({ props: {foo3, bar3}}) => (
  <div>
    <span>{foo3}</span>
    <span>{bar3}</span>
  </div>
)

// Component2.js
const Component2 = ({ props: {foo2, bar2}}) => (
  <div>
    <span>{foo2}</span>
    <span>{bar2}</span>
  </div>
)

// Component1.js
const Component1 = ({ props: {foo1, bar1}}) => (
  <div>
    <Component4 {...this.props} />
    <Component3 {...this.props} />
    <span>{foo1}</span>
    <span>{bar1}</span>
  </div>
)

// Component0.js
const Component0 = ({ props: {foo0, bar0}}) => (
  <div>
    <Component1 {...this.props} />
    <Component2 {...this.props} />
    <Component3 {...this.props} />
    <span>{foo0}</span>
    <span>{bar0}</span>
  </div>
)

// Container.js
const ComponentContainer = ({ props }) => (
  <Component0 {...this.props} />
)

mapStateToProps = (state) => (
  foo0: state.foo0,
  bar0: state.bar0,
  foo1: state.bar1,
  bar1: state.bar1,
  foo2: state.bar2,
  bar2: state.bar2,
  foo3: state.bar3,
  bar3: state.bar3,
  foo4: state.bar4,
  bar4: state.bar4,
  foo5: state.bar5,
  bar5: state.bar5
)

// App.js
const AppContainer = connect(mapStateToProps, null)(ComponentContainer);
ReactDOM.render(<AppContainer />, document.querySelector('#mount'));