extra context at 02:59 : the keyword "children" is a reserved name, it looks for every time a component in this case Parent has a nested child component, we can see this inside the App component: child is nested inside parent and that is how the {children} props given to App() knows who is the child. Just wanted to clarify that this is not magic for those who didn't know, like myself😁
1:30 When you set a state based on previous value, it's usually better to use a callback: setShow(prev => !prev) Setting state is asynchronous. In more complicated cases, weird bugs may occur if you don't use callback method. Similar for the counter exercise: setCounter(prev => prev + 1)
That was really good fun, thanks! Each one kinda quick and easy, but really well presented and good practice before what will invariably be a weird technical interview 🙂
those interviews 😳 i purposely made these exercises easy and quick as when you know all these fundamentals you can confidently go to these interviews and don’t have to google anything up.
Parent component passes a setter (hook) as prop to the child. It is a function that updates a state. The child receives this as prop and when it invokes that setter with data, the parent state gets updated.
In Sum of Two Numbers question, you used +e (+e.target.value), why? What is the significance of using +e. When I am not using + sign the numbers are behaving as strings.
Thanks alot this is very much helpful for me as a beginner in React, a hands on demo video with example and result is much better than a documentation page. 🙏 Once again Thank You very Much 🙏
your welcome Aravind! this channel is created to help engineers learn and land a job and i am glad to hear that this video helped you out! stay tuned for next video next week 😉🤙🏻
Thanks for the sweetest comment I ever received. I tried to make the vids quick and straight to the point. What do you like about my style and maybe some things that I may improve?
This is good but it really is very basic. can you please make another video with coding assignments the same style like you did here, only for people that are not new to react ?
Hello, and thanks a lot for the video. One question: why does #7 only works if you name the property "children"? I tried naming it differently, and it doesn't work
thanks for the comment. is there anything you like or can be improved on this video? ill find time to work on more js advance interview questions. have a good day!
@@ASoftwareEngineer Thanks man.please do keep post.I knew the video creation takes time.if you can schedule for the weeks or weekend, that would be good
Definitely got my hands on the keyboard and was fun! Good job 🎉
getting your hands dirty is the only way to test your knowledge and build something. glad to hear that you do these exercises.
The questions were so nice clear and cool, gave a real confidence boost !
I am so glad to hear! Good luck on your interview. You got this.
This is the best React refresher I have found on youtube..Thank you!
thanks for the very nice comment i have received from youtube. i am working on another’s react video so please stay tuned. 🤙🏻😉
extra context at 02:59 : the keyword "children" is a reserved name, it looks for every time a component in this case Parent has a nested child component, we can see this inside the App component: child is nested inside parent and that is how the {children} props given to App() knows who is the child. Just wanted to clarify that this is not magic for those who didn't know, like myself😁
really great ReactJS that one should know. This enables composition pattern.
Thank you, I was trying to make sense of why no other variable name worked
1:30
When you set a state based on previous value, it's usually better to use a callback:
setShow(prev => !prev)
Setting state is asynchronous. In more complicated cases, weird bugs may occur if you don't use callback method.
Similar for the counter exercise: setCounter(prev => prev + 1)
good point! Thanks Dirk for pointing it out.
Thanks for creating this concise yet rich coding challenge list
absolutely. I would say this video is the favorite and get lots of love. thanks for providing comment
Great job man! Both Codepen challenges and this video is awesome as a refresher, you should do more of these!
will do. it is one of my popular video so will definitely do another one soon
That was really good fun, thanks! Each one kinda quick and easy, but really well presented and good practice before what will invariably be a weird technical interview 🙂
those interviews 😳 i purposely made these exercises easy and quick as when you know all these fundamentals you can confidently go to these interviews and don’t have to google anything up.
all exercises is most important ..........thanku ,,,,,,,,,,,,,,,
I've had a few of these come up in interviews, from entry to associate level
thanks for the comment. These are fundamentals in ReactJS and if you know or master them, you should be able to do well in the interview
on the callback example, at 2:58 how did parent get the message "Parent has been updated" ?
Parent component passes a setter (hook) as prop to the child. It is a function that updates a state. The child receives this as prop and when it invokes that setter with data, the parent state gets updated.
Exceedingly good. Thanks!
you just made my day! thank you very much 👊😉
yeah great. so efficient ! Genius ! thank you.
thank you Johan! this is one of my most liked video so far and i am hoping to create something similar soon.
In Sum of Two Numbers question, you used +e (+e.target.value), why? What is the significance of using +e.
When I am not using + sign the numbers are behaving as strings.
`+` is a quick way to convert a string to a number. Number(e.target.value) or parseInt(e.target.value, 10) are the alternatives
@@ASoftwareEngineer Hi, thanks for clarifying. But why were the numbers behaving as string on the first place.
@@priyanshimahajan5453 it is because text/strings are the type of values coming from the input fields by default
@@ASoftwareEngineer but didn't we specified the input type as number?
it has been long time I did not code
this was a nice refresher thanks 😍
please post more like this challenges
you are welcome! I appreciate the comment and will post more challenges like this one.
Thanks alot this is very much helpful for me as a beginner in React, a hands on demo video with example and result is much better than a documentation page. 🙏 Once again Thank You very Much 🙏
your welcome Aravind! this channel is created to help engineers learn and land a job and i am glad to hear that this video helped you out!
stay tuned for next video next week 😉🤙🏻
For best learning TH-cam channel. I like it so much...
Thanks for the sweetest comment I ever received. I tried to make the vids quick and straight to the point.
What do you like about my style and maybe some things that I may improve?
@@ASoftwareEngineer more vide like this. like coding interview it's more help me to get a job
@@nazmulhosens you got it! Expect more videos like this soon. Thanks.
Oracle interviewer asked me solve few of this..Please upload more content like this
you got it!
@@ASoftwareEngineer ye she literally copy pasted the Code Pen link
@@animeshanandcool lol or perhaps just forked my pen after watching my video 😉🤙🏻
@@ASoftwareEngineer Update: I finally have 3 offer letters. I come to this video before any interview to revise.
@@animeshanandcool congrats Animesh! well done 👊🎉🎊
Thank you! Very useful
You are welcome! I am glad that you find this video useful.
I am hoping that this can reach and help more engineers.
This is good but it really is very basic. can you please make another video with coding assignments the same style like you did here, only for people that are not new to react ?
i made a tic tac toe if you haven’t seen it yet - th-cam.com/video/w8V--ZBzh7w/w-d-xo.html i’ll come up with something else.
For Disable a button, could simply supply the state in disabled attribute:
a great alternative, thanks Ramon
Where can i get more challenges for my my interview preparation
i can recommend a few things for you like build some projects.
weather app, tic tac toe, calculator, modal screen, etc
hope this is enough for now
@@ASoftwareEngineer thanks that's helpful 👍 🙂
Next recommended video to watch - th-cam.com/video/rBhKb9JE8z0/w-d-xo.html (10 React Optimization Tips)
thanks!
you are very welcome!
Hello, and thanks a lot for the video. One question: why does #7 only works if you name the property "children"? I tried naming it differently, and it doesn't work
children is reserved word and must be used as-is. might be able to rename it using deconstruction if need to be
@@ASoftwareEngineer Ah, clear now. Thanks a lot for clarifying!
@@stankokostic725 you are welcome! glad to help you out.
#7 React Coding - React Children (Exercise) - we could directly use component into parent function
Hi Giorgi! Yes, we sure can but the intent of the exercise is to demonstrate React.children - its implementation and to see that it works.
this is awesome
thank you and I am glad that you liked the video.
Thank you 🙏
You are welcome! I hope that you ace your next interview.
@@ASoftwareEngineer thank you so much 😊
Please post react eco system interview questions if it possible and Please do react and javascript senior level interview questions regularly
thanks for the comment. is there anything you like or can be improved on this video?
ill find time to work on more js advance interview questions. have a good day!
@@ASoftwareEngineer Video quality is good.
@@kovendanragupathi7632 thank you very much! I'll continue to improve and put out videos that are better than the previous one.
here is another video for you if you haven't watch - th-cam.com/video/2j8L8RsHQpM/w-d-xo.html (Object Equality)
@@ASoftwareEngineer Thanks man.please do keep post.I knew the video creation takes time.if you can schedule for the weeks or weekend, that would be good