gaearon / react-side-effect

Create components whose nested prop changes map to a global side effect

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Expected handleStateChangeOnClient to be a function

0x80 opened this issue · comments

I have created this component for adding and removing css classes on the document body, taking the docs as a lead, but it is giving me the title error message. What am I missing?

I'm using v1.0.1

import { Component, Children, PropTypes } from 'react'
import withSideEffect from 'react-side-effect'

class BodyClasses extends Component {
  static propTypes = {
    add: PropTypes.string,
    remove: PropTypes.string
  }

  render() {
    return Children.only(this.props.children)
  }
}

function reducePropsToState (propsList) {
  var diff = {add: [], remove: []}
  propsList.forEach(function (props) {
    if (props.add) diff.add.push(props.add)
    if (props.remove) diff.remove.push(props.remove)
  })
  return diff
}

function handleStateChangeOnClient (diff) {
  diff.add.forEach(className => document.body.classList.add(className))
  diff.remove.forEach(className => document.body.classList.remove(className))
}

export default withSideEffect(
  reducePropsToState,
  handleStateChangeOnClient
)(BodyClasses)

Nevermind it was a different component based on side effects throwing the error. Oops 😊