ReactJS Tutorial – 33 – Higher Order Components (Part 1) | Chủ Đề về chủ đề hoc js |

Bhhh h unku

i got error
cannot read property 'count' undefined in the hoverClick.js?? some pls help

"I'll get rid of the named export", should I ask the es7 snippets guy to remove that permanently 🤗

No one:

Codevolution guy: I will use the snippet RCE to create a class component.

Real content starts at 5:41

Whoa. Very impressed by how you explained this, you clearly showed us the problem that we are trying to solve and yeap, going to the parent is the first thing we would normally do. On to the next one!

Can someone clear my doubt please. When vishwas says we lift the counter logic to parent. I think we will have to define two state properties clickHounter & hoverCounter. But my doubt is, do i create two different methods (1 for click & one for hover) in parent component, where they seperately increase the state by 1. IF NO, & If i put only one handler in parent component, then how will this handler know that the handler has been called from Click component or Hover component?? how do i selectively increase my clickCount / Hover cover? The code below works for me. Is there a way I could do it without if condition.
PS: i passed strings "hover" or "click" as parameters from child components to the incrementCount method

import React, { Component } from 'react'

import ClickCounter from './ClickCounter'

import HoverCounter from './HoverCounter'

class ParentCounter extends Component {

constructor(props) {

super(props)

this.state={

count: 0,

hover: 0

}

}

incrementCount=(str)=>{

if(str==="click"){

this.setState(prevState=>({ count: prevState.count+1}))

}

if(str==="hover"){

this.setState(prevState=>({ hover: prevState.hover+1}))

}

}

render() {

return (

<div>

<ClickCounter incrementCount={this.incrementCount} click={this.state.count} />

<HoverCounter incrementCount={this.incrementCount} hover={this.state.hover} />

</div>

)

}

}

export default ParentCounter

How did u get that arrow symbol?

´Perfect Introduction to HOC! In so many of your videos i experienced those "Aha"-moments.
I will support you donating for every video of yours that helped me. I hope many other ppl will do the same.

i am getting error "Failed to compile

./src/HoverCounter.js

Line 15:24: Expected an assignment or function call and instead saw an expression no-unused-expressions
" in both ClickCounter.js and HoverCounter.js. line 15 is where i declared incrementCount as arrow function. crosschecked the code. it's exactly same as shown in video. please help, i m stuck

Great job…………….please seems Video 32 is missing……..Thanks

Finally someone who knows how to explain and give examples.

hai sir u can upload vedios on throwtling and debouncling plsssss

in incrementCount method, instead of calling previous state. we could have incremented it. for e.x.:

incrementState = () => {
this.setState({
count:this.state.count+1
})
}

This also increment each time button is clicked. Does it make any difference then using prevState.

thankyou

Could you please examples on Form validations using reactstrap and bootstrap? Thanks..

Beautifully explained!

I have created a component with useHooks to make Ajax call and return result. Would it be correct to use this in Thunk and await the response and then dispatch event for reducer to handle?

what is the prevState ?