2 componentes: - ClickCounter, mouseHoverCounter! 1 componente HOC para hacer el trabajo de conteo.

antes estaba contando el clic y el desplazamiento del mouse escribiendo un método de contador separado en cada componente (cliccounter,mousehovecounter), pero ahora, estoy tratando de pasar el componente al contador hoc y obtener el nuevo componente con un solo cambio, donde estoy pasando un accesorio a originalComponent y devolviéndolo para ver el comportamiento, pero ahora está funcionando ...

 import React, { Component } from 'react' import updatedComponent from './hocCounter' class ClickCounter extends Component { constructor(props) { super(props) this.state = { counter:0 } } ClickCounterHandler = () =>{ this.setState((prevState)=>{ return {counter:prevState.counter+1} }) } render() { const count=this.state.counter return ( <div> <button onClick={this.ClickCounterHandler}>{this.props.name} Clicked {count} Times</button> </div> ) } } export default updatedComponent(ClickCounter)

 import React, { Component } from 'react' import updatedComponent from './hocCounter' class HoverMouseCounter extends Component { constructor(props) { super(props) this.state = { counter:0 } } MouseOverCounter(){ this.setState((prevState)=>{ return {counter:prevState.counter+1} }) } render() { const count=this.state.counter return ( <div> <h1 onMouseOver={this.MouseOverCounter.bind(this)}>{this.props.name} Hovered For {count} Time(s)</h1> </div> ) } } export default updatedComponent(HoverMouseCounter)

 import React from 'react' const updatedComponent = originalComponent => { class newComponent extends React.Component { render(){ return <originalComponent name='Harsh'/> } } return newComponent } export default updatedComponent

En App.js, estoy regresando

 <ClickCounter></ClickCounter> <HoverMouseCounter></HoverMouseCounter>

solo esto !