Recompose multiple renderComponent

Question

I have a recompose filter that needs to render two components and pass props from a redux connect to the second component

However the code below never renders the second renderComponent - which is a real shame. Is there a way to get the below working, or should I opt for a regular React component?

import { compose, renderComponent } from "recompose"
import { connect } from "react-redux"

import Filters from "./filter/filter"
import Wrestlers from "./container"

const defaultState = state => ({
  collection: state.roster,
})

export default compose(
  renderComponent(Filters),
  connect(defaultState),
  renderComponent(Wrestlers),
)(Wrestlers)

Answer 1

renderComponent always discards the second argument (the base component) and renders the first argument. If you want to render then both, just create a new component and render them. Probably something like:

const Parent = ({ collection }) => (
  // You can return an array here if you are using React 16
  <div>
    <Filters />
    <Wrestlers collection={collection} />
  <div>
)

export default connect(defaultState)(Parent)