React HOC - function `is not a function`

Question

Simple homework problem working on React HOC.

I thought it was simple... HOC [withClapAnimation] passes animate function to [MediumClap]. animate merely console.logs. [MediumClap] is button that should spit out the animate when triggered... I get the response animate is not a function

Any ideas?

before animate

import React, {Component, useState} from 'react'
import styles from './index.css'

const initialState = {
  count: 0,
  countTotal: 200,
  isClicked: false
}

const withClapAnimation = WrappedComponent => {
  class WithClapAnimation extends Component {
  render () {
      return 
    }
  }
  return WrappedComponent 
}

const MediumClap = () => {
  const MAX_USER_CLAP = 10
  const [clapState, setClapState] = useState(initialState)
  const {count, countTotal, isClicked } = clapState

  const handleClapClick = () => {
    
    setClapState(prevState => ({
      isClicked: true,
      count: Math.min(count + 1, MAX_USER_CLAP),
      countTotal: 
        count < MAX_USER_CLAP 
          ? prevState.countTotal + 1 
          : prevState.countTotal
    }))  
  }
  return 

}

const ClapIcon = ( {isClicked}) => {
  return  
     
  
}
const ClapCount = ({count}) => {
  return  + {count} 
}

const ClapTotal = ({countTotal}) => {
  return  {countTotal} 
}

const Usage = () => {
  const AnimatedMediumClap = withClapAnimation(MediumClap)
  return 
}
export default Usage

after adding animate

import React, {Component, useState} from 'react'
import styles from './index.css'

const initialState = {
  count: 0,
  countTotal: 200,
  isClicked: false
}

const withClapAnimation = WrappedComponent => {
  class WithClapAnimation extends Component {
    animate = () => {
        console.log('animate')
    }
    render () {
      return 
    }
  }
  return WrappedComponent 
}

const MediumClap = ({animate}) => {    
  const MAX_USER_CLAP = 10
  const [clapState, setClapState] = useState(initialState)
  const {count, countTotal, isClicked } = clapState

  const handleClapClick = () => {
    animate()
    setClapState(prevState => ({
      isClicked: true,
      count: Math.min(count + 1, MAX_USER_CLAP),
      countTotal: 
        count < MAX_USER_CLAP 
          ? prevState.countTotal + 1 
          : prevState.countTotal
    }))  
  }
  return 

}

const ClapIcon = ( {isClicked}) => {
  return  
     
  
}
const ClapCount = ({count}) => {
  return  + {count} 
}

const ClapTotal = ({countTotal}) => {
  return  {countTotal} 
}

const Usage = () => {
  const AnimatedMediumClap = withClapAnimation(MediumClap)
  return 
}
export default Usage

before after

adel · Accepted Answer

in withClapAnimation HOC your getting the component WrappedComponent and returning it without applying any changes instead you need to return the modified component WithClapAnimation like this:

const withClapAnimation = WrappedComponent => {
  class WithClapAnimation extends Component {
    animate = () => {
    console.log('animate')
   }
  render () {
      return 
    }
  }
  return WithClapAnimation 
}

React HOC - function `is not a function`

Answers (1)

Related Questions