import React, { Component } from 'react';
import click from './componet/click'
import mouse from './componet/mouse'
class App extends Component {
render() {
return ( < div > < p > check it < /p> < click / > < mouse / > < /div>)
}
}
export default App;
//click.js given below
import React, { Component } from 'react'
import handlerHoc from '../hoc/withHoc'
class Clicker extends Component {
constructor(props) {
super(props)
}
render() {
return ( < button onClick = { this.props.increamentCount } > Count is { this.props.count } < /button>)
}
}
export default handlerHoc(Clicker)
//mouse.js given below
import React, { Component } from 'react'
import handlerHoc from '../hoc/withHoc'
class Mouser extends Component {
constructor(props) {
super(props)
}
render() {
return ( < p onMouseOver = { this.props.increamentCount } > Count is { this.props.count } < /p>);
}
}
export default handlerHoc(Mouser)
//withHoc given below
import React, { Component } from 'react'
const withHoc = (Wraper) => {
class Handler extends Component {
state = { count: 0 }
countIncreaser = () => {
this.setState(prevStae => {
return { count: prevStae + 1 }
})
}
render() {
return ( < div > < Wraper count = { this.state.count }
increamentCount = { this.countIncreaser }
/></div > )
}
}
return Handler
}
export default withHoc
I can not see any error message but still there is no output.I am sure that both terminal and browser not showing any error................... i tried many ways but still getting this. .....................................................................................................................................................................................................................................................................................................................
Aucun commentaire:
Enregistrer un commentaire