This is kind of hard to digest for someone like me who's just starting with React/JS in general, but a great example nonetheless. I'm gonna go over it multiple times and see if I can replicate something similar in my code :d. Thank you!
Great stuff, you made me use HOC comfortably without any issues and I have to develop similarly in my project which is creating multiple iterations of buttons.
can @techsith or anyone explain @13:10 Why do we have to return the wrappedComponent from inside of return function wrappedRender(args){...} , and not directly...?
Now this function wrapped render would actually receive the props that button one was supposed to get and then translate those props and then the wrapoed component would be returned
I've been thinking about the HOC part of this and I like to share with everyone what I came up with. Let me know if you disagree. The goal is we want to take the original component and get an updated component, by passing the original component into a function. So I changed the functions names to better reflect that. export default (originalComponent) => { return function updatedComponent(args) { return originalComponent(translateProps(args)); } } In techsith's example ButtonOne is the originalComponent, I think that component gets saved in the closure belonging to the updatedComponent function. The updatedComponent function gets returned to stylesWrapper, and stylesWrapper completes it by passing in the props object as the args argument.
How to pass two styles for the styles object and to newprops, means I want to give both background color as one style and for text color i want to use as text style separately..at that time how can i pass
this is a good exmple of hoc function withSubscription(WrappedComponent, selectData) { // ...and returns another component... return class extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { data: selectData(DataSource, props) }; } componentDidMount() { // ... that takes care of the subscription... DataSource.addChangeListener(this.handleChange); } componentWillUnmount() { DataSource.removeChangeListener(this.handleChange); } handleChange() { this.setState({ data: selectData(DataSource, this.props) }); } render() { // ... and renders the wrapped component with the fresh data! // Notice that we pass through any additional props return ; } }; }
6:38 const _styles magically changes to let _styles. There are tutorials that are error free. Maybe you should record in short bursts, making a copy before each clip, so if you make a mistake, you can reset the code and do that clip again. I'm often just listening and typing, so if something magically changes, I'll miss it.
Hello Sir, At 3:14 you switch to App.js then there is no "import React from in the ButtonOne.js" war written ... But when the code compiles successfully then i see that on 3:39 this is the first line.. It may be due to cutting of the video but I was in trouble for 15 min due to this
passing class component in HOC gives warning Warning: wrappedRender(...): When calling super() in `wrappedRender`, make sure to pass up the same props that your component's constructor was passed. any idea to resolve this ?
means inside the HOC you can something to change the props. so you can use same component to transform into different components. In the video , I am adding styles to the props.
Thank you so for this tutorial, learned a lot from this. You are videos are so descriptive and easily understandable. My request is, can you do a few videos on testing react apps?
Anyone please explain me this part => export default (WrappedComponent)=>{ return function wrappedRender(args){ return WrappedComponent(translateProp(args)); } }
Nice. HOC seems best when I am refactoring existing components to add some masala over it. No changes inside all existing components, just wrap it in HOC and use it instead.
Great stuff sir, your videos made me understand React much better than before, I hope you'll make something about Redux and proper way to dispatch actions from children components. Keep up the good work!
Hi sir .....I like your tutorials. ONE DOUBT : How are we able to access the props of WrappedComponent in the wrappedRender(args) function .... ??? Please do reply .. THANKS
Usually your tutorials are very informative but this one was a hot mess with too many mistakes. You wrote complicated code without explaining how and why it works.
bro pleeeasee make a playlist about react with firebase cloud functions, that way theres at least one channel in the whole youtube about making a serverless web app. react, cloud functions, and stripe :)
I like your tuts, but this one is a bit annoying, you jumped many times and the code just disappears and you continue talking as if we were with you off camera, I would suggest you reduce cuts and try to maintain coding on camera, its more natural this way in my opinion, thanks for sharing and best Regards :)
@@Techsithtube thank you for your response, one more question. do you still do js mock interviews? and if you do, is it free ? and if not how much does it cost in USD. thanks and I am a big fan regardless. cheers from Egypt btw ;)
It is not too hard tho, just keep your head around what you wanna acomplish with your function, create that function and use it in your project after :D
amazing tutorial thanks. it would be good if you put your code on codesandbox so we could fork it and play with it. also, it would save you the hassle of creating a react app yourself.
Disable means to turn off. What you have done is override your styles. You even call your hoc style wrapper. It does not make any sense to call your property “disable”. I am rejecting your code until you fix your variable names. LOL
hi, better try to make simple videos. so that beginners can understand. This is not a place to show how much you know. we are here not to see your knowledge, rather we are here to learn. so try to explain with simple example. thank you
yes this one is hard, but if you don't know JS higher order function itself, surely you wont get this in one sitting. Thanks again sir!
Yes , that is true. you need to know the concept of higher order function.
This is kind of hard to digest for someone like me who's just starting with React/JS in general, but a great example nonetheless. I'm gonna go over it multiple times and see if I can replicate something similar in my code :d. Thank you!
Great stuff, you made me use HOC comfortably without any issues and I have to develop similarly in my project which is creating multiple iterations of buttons.
can @techsith or anyone explain @13:10
Why do we have to return the wrappedComponent from inside of return function wrappedRender(args){...} ,
and not directly...?
My thoughts exactly!
I hope you understand now 😊. HOC return a function/component.
Just a Chutiya explaination he gave
Now this function wrapped render would actually receive the props that button one was supposed to get and then translate those props and then the wrapoed component would be returned
I've been thinking about the HOC part of this and I like to share with everyone what I came up with. Let me know if you disagree.
The goal is we want to take the original component and get an updated component, by passing the original component into a function. So I changed the functions names to better reflect that.
export default (originalComponent) => {
return function updatedComponent(args) {
return originalComponent(translateProps(args));
}
}
In techsith's example ButtonOne is the originalComponent, I think that component gets saved in the closure belonging to the updatedComponent function. The updatedComponent function gets returned to stylesWrapper, and stylesWrapper completes it by passing in the props object as the args argument.
how are you getting the props as args in return function wrappedRender(args) ?
that same question comes in to my mind
Where is the style wrapper class declared ?
Why the object inside object with the styles? Ibe bever needed to use default like that, should I?
@techsith - How the wrapperRender method get called? wrapperRender is built-in method in react like render method ?
How to pass two styles for the styles object and to newprops, means I want to give both background color as one style and for text color i want to use as text style separately..at that time how can i pass
Hi Thanks, just one question. How the props of ButtonOne are getting assigned to parameter named args of wrappedRender function?
I am passing args which is nothing but props.
I'm having some trouble on understanding this
@@Techsithtube HOW DOES THE PROPS GOING IN ARGS, HOW DO THEY GET THERE ? DON'T YOU SEE A LOT OF ASKERS DONT UNDERSTAND THIS MOST IMPORTANT PART!
For let _styles , do we really need a spread operator ? Can it not just be _styles = styles.default and _styles= styles.disable ?
Hello sir, I m stuck how to reuse hoc in class components. Please anyone explain
this is a good exmple of hoc
function withSubscription(WrappedComponent, selectData) {
// ...and returns another component...
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: selectData(DataSource, props)
};
}
componentDidMount() {
// ... that takes care of the subscription...
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
this.setState({
data: selectData(DataSource, this.props)
});
}
render() {
// ... and renders the wrapped component with the fresh data!
// Notice that we pass through any additional props
return ;
}
};
}
6:38 const _styles magically changes to let _styles. There are tutorials that are error free. Maybe you should record in short bursts, making a copy before each clip, so if you make a mistake, you can reset the code and do that clip again. I'm often just listening and typing, so if something magically changes, I'll miss it.
Hello Sir, At 3:14 you switch to App.js then there is no "import React from in the ButtonOne.js" war written ... But when the code compiles successfully then i see that on 3:39 this is the first line.. It may be due to cutting of the video but I was in trouble for 15 min due to this
Oh sorry, Rajat. you can download the final solution from my git site. It's In the description of the video.
Sorry but this is not a very good HOC explanation.
why his audio and video is not matching
passing class component in HOC gives warning
Warning: wrappedRender(...): When calling super() in `wrappedRender`, make sure to pass up the same props that your component's constructor was passed.
any idea to resolve this ?
Its a right warning that when you need to pass the same parameters when calling super. because its calling the parent class.
I prefer if you to go back to zen mode of teaching enlightenment rather than confusion.
The HOC is same as the container in redux that contains behavior for other components?
yes
Is using an underscore like '_styles' an optional notation for a closure?
_styles is just a variable name
How I can do infinite scroll react js please help me
Hi,
Can I make api calls in class returned by higher order component?
Pradhumn Sharma you can do anything before returning the lower order component. Also you can pass the data to the loc (lower order comp)
what do u mean by translate one prop to other?
means inside the HOC you can something to change the props. so you can use same component to transform into different components. In the video , I am adding styles to the props.
Thank you so for this tutorial, learned a lot from this. You are videos are so descriptive and easily understandable. My request is, can you do a few videos on testing react apps?
Anyone please explain me this part =>
export default (WrappedComponent)=>{
return function wrappedRender(args){
return WrappedComponent(translateProp(args));
}
}
In nutshell take arguments of the passed components do something with it and pass it back to the same component and return .
does where args comes from?
They are incoming props that are defined when calling the component in app.js
Nice. HOC seems best when I am refactoring existing components to add some masala over it. No changes inside all existing components, just wrap it in HOC and use it instead.
Nice example for HOC
Thank you for watching!
Great stuff sir, your videos made me understand React much better than before, I hope you'll make something about Redux and proper way to dispatch actions from children components.
Keep up the good work!
Hi sir .....I like your tutorials.
ONE DOUBT :
How are we able to access the props of WrappedComponent in the wrappedRender(args) function .... ??? Please do reply .. THANKS
Becase i am returning a function where the props are automatically available.
@@Techsithtube not clear. this is the most important part of HOC paradigm and you just skipped it. for fuc sake! made me angry
You are Awesome sir! HOC or render props?
Best explanation on HOC ever
Hey man I in a really tough situation. Please make a tutorial on how to do authentication with react. Please.
this one was hard ㅜㅜ but thanks i see what your trying to explain i will just have get used to this
I always Like your videos before it starts!
Your simplistic style of teaching is great! Thanks!
const style = {
default: {
backgroundColor: 'green',
color: 'yellow',
padding: '10px',
},
disable: {
backgroundColor: 'yellow',
color: 'red'
}
}
const Child = ({ props }) => {
return (
IM BUTTON
)
}
const HOC = ({ Component, ...props }) => {
let _style = { ...style.default };
if (props.disable) {
_style = { ..._style, ...style.disable }
}
let newProps = { ...props, style: _style };
return
}
const App = () => {
return (
);
}
export default App;
works the same way
Bahaut hi ganda explaination
Lon'j'er Video Playlist
Can you please start redux tutorials
He has uploaded the videos on redux
.It is pretty good.
Clear as Mud.
Lol.
@@Techsithtube Sorry, I was having a bad night when I made that comment. Love your ch and your teaching(s)!
great tutorial man. keep it up
Thank You @techsith !!!! you should add your email or website (maybe a gastby video?) so that people can contact you
My email and site is in the description of the channel. feel free to email me.
Tutorial is good, but, should show output with new changes
Usually your tutorials are very informative but this one was a hot mess with too many mistakes. You wrote complicated code without explaining how and why it works.
it's free dude. Create your own and move on
@@bh3326 this doesn't mean feedbacks are unwelcome.
tech shit
Very helpful. Thank you!
bro pleeeasee make a playlist about react with firebase cloud functions, that way theres at least one channel in the whole youtube about making a serverless web app. react, cloud functions, and stripe :)
ok bro, I will try to make those videos. thanks for watching!
techsith appreciate it brother!
What are props?
You made it very hard.
I feel like, I need to re create another video on this.
@@Techsithtube waiting for...
My man, open up your DM on twitter
This episode was a bit confusing.
lerning, lerning, lerning
Dude your are great teacher are you have Udemy course
I dont have a udemy course however i am planning to make one soon.
Your all other explanations were much understandable.. This one is a mess.. Can u come up with more easier one for HOC..?
I like your tuts, but this one is a bit annoying, you jumped many times and the code just disappears and you continue talking as if we were with you off camera, I would suggest you reduce cuts and try to maintain coding on camera, its more natural this way in my opinion, thanks for sharing and best Regards :)
Yes, that video I had bit difficulty editing. I have fixed that in the subsequent videos.
@@Techsithtube thank you for your response, one more question. do you still do js mock interviews? and if you do, is it free ? and if not how much does it cost in USD. thanks and I am a big fan regardless. cheers from Egypt btw ;)
@@@moswilam91 Yes i still do mock interview. there is no cost. feel free to email me at techlover2000@gmail.com and we can set itup.
Sir create tutorial series to create jquery like laibrary please !!!!!!!!
you mean with raw javaScript create my own jquery?
O yess yess yes plz sir. I always want to get in deep part of javaScript ..
It is not too hard tho, just keep your head around what you wanna acomplish with your function, create that function and use it in your project after :D
Love your video
Thank you ! very helpful
it is very hard to understand, i have doubts regarding this, it is complex, you didnt explain it properly.
Thank you.
Genuine feedback:) example looks tooooo complicated
yes, it's hard to simplify this example :)
instead of using spread operator ,we can use this =>
I am button One
The spread operator allows you to merge two objects instead of just choosing either disabled or default
@@ColtsFan288 xcatly brother, but if want to insert two different styles den we can use this also
@@sayedabdulkarim7086 what if you have 3 or more styles you need to pick from?
Thank you!
nice
Just so you know,
./../
and
../
do the same thing
Great tutorial.
Thanks for watching!
amazing tutorial thanks. it would be good if you put your code on codesandbox so we could fork it and play with it. also, it would save you the hassle of creating a react app yourself.
the code is on git hub so you could fork it. github.com/techsithgit/react-higher-order-components.git
Difficult to understand with this example
Not an up to mark video for HOC
You should've ended the video by displaying how to add other types of buttons.
Disable means to turn off. What you have done is override your styles. You even call your hoc style wrapper. It does not make any sense to call your property “disable”. I am rejecting your code until you fix your variable names. LOL
You have used ‘this’ inside of an arrow func. What a shame...
big example..not understandable clearly..
hi,
better try to make simple videos. so that beginners can understand. This is not a place to show how much you know. we are here not to see your knowledge, rather we are here to learn. so try to explain with simple example. thank you
Bad explanation for HOC
Typical indian code right there
you frequently forget your semicolons