Recompose: Question about error message from withHandlers

[rockchalkwushock]

I'm new to using recompose and am trying to refactor some code using withState() & withHandlers. The project is using next.js so I already am using some homemade HOCs, withLayout, to render a universal layout to all my pages; and withData for providing the reduxStore to the pages. I have them composed together and wrap my _pages/component_ in the composed HOC. Links to those HOCs are below:

• withLayout
• withData

I've run into an interesting error message and I believe I know what is causing it; but I'd like to discuss it with some folks to make sure I understand what's going on. <SearchBar /> is the component I am targeting with the recompose HOCs and it is a child to my HomePage which is wrapped in 3 HOCs already. The error I get returning is:

So it looks as though 1) next.js cannot define my handler & 2) there is a mapping issue with the HOCs. I believe the later is because their are 3 HOCs dare I say _out of scope_ to withHandlers & the _composed_ HOC wrapping SearchBar. Is that the correct way of thinking about the _Expected map of higher order components_. Any advice or information on better understanding the error would be greatly appreciated.

_HomePage_

import { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'

import { getQuestions, page } from '../lib'
import  SearchBar from '../components'

class Home extends Component {
  static propTypes = {
    getQuestions: PropTypes.func.isRequired,
    initialState: PropTypes.shape({
      form: PropTypes.object,
      questions: PropTypes.object
    }).isRequired,
    url: PropTypes.shape({
      pathname: PropTypes.string.isRequired
    }).isRequired
  }
  render() {
    return <SearchBar {...this.props} />
  }
}
// page() is the composed: withLayout() & withData()
export default page(connect(null, { getQuestions })(Home))

_SearchBar_

import { compose, withHandlers, withState } from 'recompose'
import { Field, reduxForm } from 'redux-form'

import {
  Form,
  Input,
  StyledButton,
  StyledClosingSpan,
  StyledInputHolder,
  StyledSpan,
  StyledWrapper
} from './components/searchCommons'

/**
 * getQuestions comes from Parent as props via connect()
 * handleSubmit comes from reduxForm
 *
 * QUESTION: Can I compose reduxForm with the other HOC's???
 *
 * 1. Make SearchBar a functional component.
 * 2. Apply HOC wrapper.
 * 3. First apply withState()
 * 4. Second apply withHandlers()
 * 5. Third apply withPropsOnChange, might not need this
 * 6. reduxForm????? Maybe first HOC???
 */

const enhance = compose(
  reduxForm({ form: 'searchbar' }),
  withState('view', 'toggle', false),
  withHandlers({
    handleOnClick: props => {
      props.toggle(!props.view)
    }
  })
)

const SearchBar = ({ getQuestions, handleOnClick, handleSubmit, view }) =>
 <Form onSubmit={handleSubmit(getQuestions)}>
  <StyledWrapper>
    <StyledInputHolder open={view}>
      <Field
        component={Input}
        name="query"
        open={view}
        placeholder="Search a topic on StackOverflow"
        type="text"
      />
      <StyledButton onClick={handleOnClick} open={view}>
        <StyledSpan open={view} />
      </StyledButton>
    </StyledInputHolder>
    <StyledClosingSpan onClick={handleOnClick} open={view} />
  </StyledWrapper>
 </Form>

export default enhance(SearchBar)

[snhasani]

@rockchalkwushock withHandlers should return a High Order Function.

before:

withHandlers({
    handleOnClick: props => {
      props.toggle(!props.view)
    }
  })

after

withHandlers({
    handleOnClick: props => () => {
      props.toggle(!props.view)
    }
  })

[rockchalkwushock]

@snhasani thanks so much for the extra set of eyes totally missed that! 👍

[dredtrake]

@snhasani thanks man!