VERY GOOD, THIS GUY IS A COMPLETE TEACHER, CALM AND GOOD EXPLANATIONS, USING EXAMPLES TO BETTER UNDERSTANDING, AND YEA IM SPEAKING LOUD
@TK-ot8dj
Жыл бұрын
I like the way you say it out loud :))
@mytech-youtube8436
Жыл бұрын
Amazingly well made tutorial. From production to content. Quality content!
@جعفرمنطقیبیگ
6 ай бұрын
This video was really great. This model of explaining is unique for someone who is not well known on KZitem. I hope to learn more from you.
@JDIT21
7 ай бұрын
I rarely comment, but thanks to this tutorial and your way of explaining it, things became clearer. Subscribed! 🔥🔥
@jikamana
Ай бұрын
You made my day already in less than 5 minutes, I've been trying this for more than a day, I had to learn event propagation, bubbling and capturing😢, But thanks dude ❤
@Radiotiq
Жыл бұрын
the editing really helps me to understand the content, just like when u clicking the menu trigger u add some little text to demonstrate true or false, well done mate
@appcode-u3t
Жыл бұрын
This video is very useful. I successfully applied this Thanks Bro Keep doing such content
@Baleandor
Жыл бұрын
This helped me a lot! I'd love a draggable element tutorial!
@David-tn9iu
8 ай бұрын
Thanks a lot, it was very helpul for me, specially for understanding about why using every single part of the code. 👍
@КонстантинКрыжановский-ц4п
Жыл бұрын
The Best, easy and quickly!!!
@amrmohamed-ml7ek
Жыл бұрын
Great video man, Keep it going!
@cantseeme101
7 ай бұрын
Always seem to be coming back to this one
@widya2550
Жыл бұрын
Amazing, thanks bro. I'm fully understand
@roach7616
2 жыл бұрын
amazing vid! short and sweet, thank you
@ghastianydhaa
4 ай бұрын
thx u so much!
@markopolo2224
2 жыл бұрын
very helpful thanks!
@mingirc
Жыл бұрын
Good and clean solution. Thanks.
@keifer7813
Жыл бұрын
Nice explanation. I wonder if it would be better to use an empty dependency array for the useEffect instead of a clean-up function though
@blackpurple9163
Жыл бұрын
That's not how the empty array works, empty array only renders it once, it does not remove the functionality once the component is unmounted, so if you don't remove the eventListener, the outside click event might trigger even after the drop-down menu etc is hidden, I'm not exactly sure since I'm a beginner too but cleaning it up is always recommended
@thomaslenormand9057
Жыл бұрын
Good work ! For sure more video like this one are necessary. Great explanations ! Thank you :)
@chan4est
4 ай бұрын
Worked perfectly! Thank you!!
@slygrin1971
Жыл бұрын
Grear tutorial, thanks !
@lewiswill3663
11 ай бұрын
Very helpful, thank you.
@malfazakki1803
5 ай бұрын
amazing content!! thanks a lot!! 😁😁
@O_oph3o
8 ай бұрын
excellent, just keep going
@vipinsanthosh2230
2 жыл бұрын
really good video bro
@air_kene3419
Жыл бұрын
Very helpful, thanks!
@tahsinamin2255
Ай бұрын
Legend 👑
@FGA-47
Жыл бұрын
Thanks man that was really helpful ❤
@nitiwatchawkanha748
11 ай бұрын
why my warning is Cannot read properties of null (reading 'contains')
@tahsinamin2255
Ай бұрын
Probably useref not used properly
@VikasKumar-lg2vr
7 ай бұрын
lovely brother.. you helped me.. 😍
@myhanhnguyen5198
Жыл бұрын
thanks a lot
@frans3884
7 ай бұрын
Thank You. This video really helped me
@ElyBourland
Жыл бұрын
Thanks for this video. It gave me a solution to my problem. Liked and subscribed.
@ElyBourland
Жыл бұрын
I was getting an console error: Uncaught TypeError: Cannot read properties of null (reading 'contains') at HTMLDocument.handler. But if I wrapped the if statement with another if (menuRef.current) { }, the error went away.
@animeshanandcool
Жыл бұрын
Thnx bro
@bryanemmanuel7004
2 ай бұрын
Thank you bro.
@yavuzyalcnkaya5371
Жыл бұрын
Hey brother, thank you for this tutoial, your are the best
@sumonbala9648
Жыл бұрын
take love brother
@sAn2gasd
2 ай бұрын
I think it's better to include an empty dependency array in the useEffect. Otherwise it's just gonna keep re-rendering everytime you click.
@blackpurple9163
Жыл бұрын
How would you go ahead and make this into a custom hook? So it can be used with any kind of popup or sidebar or navbar?
@TK-ot8dj
Жыл бұрын
Great question! To make this into a custom hook, you can extract the functionality of detecting an outside click and closing the menu into a separate function, which can be reused for any type of popup, sidebar or navbar. Here's an example of how you can create a custom hook: import { useEffect } from "react"; export const useClickOutside = (ref, callback) => { const handleClick = (e) => { if (ref.current && !ref.current.contains(e.target)) { callback(); } }; useEffect(() => { document.addEventListener("click", handleClick); return () => { document.removeEventListener("click", handleClick); }; }); }; Then, in your component where you want to use the custom hook, you can simply use it like this: import { useRef } from "react"; import { useClickOutside } from "./useClickOutside"; const MyComponent = () => { const ref = useRef(null); const handleCloseMenu = () => { // close your menu logic here }; useClickOutside(ref, handleCloseMenu); return ( // your menu component here ); };
@bhanuprakash1863
2 ай бұрын
Why did you add ref to the menu-container. I suppose when we click next to your profile icon, the drop-down doesn't close right? Correct me if I am wrong.
@poolcaceres493
Жыл бұрын
Thanks man!
@ilhamrifai3714
Жыл бұрын
how to close navbar after i click menu?????
@leafmii
Жыл бұрын
Thanks Brother!
@chuchober
Жыл бұрын
thx for share it!
@fearwayesloot
Ай бұрын
Same like slide top menu which open from down to top show data also controle by slide it position like mobile app
@priyanshramnani1751
Жыл бұрын
Thank you sooo soo soooo muchhh!!!!!!
@asmet_2701
Жыл бұрын
Thanks!
@analistadesistemas
2 жыл бұрын
Excelent!
@noumanmalik960
Жыл бұрын
Thank you
@LeHoHoangThanhK17HCM
Жыл бұрын
hay quá bro ơi đúng cái tôi đang cần
@TK-ot8dj
Жыл бұрын
Cảm ơn bạn nhé
@yan7620
Жыл бұрын
thank u bro
@immanuelrajmohan830
11 ай бұрын
why did you use mousedown event ,instead of click?
@CriptoLeaks
2 жыл бұрын
Thank you bro. One question, how to add some text below the main text of menu...for example any description
@GTX-cr4ob
2 жыл бұрын
why we need to remove eventListener ??
@tran_quang_ngoc
2 жыл бұрын
*Có bắt đầu có kết thúc 🥲*
@GTX-cr4ob
2 жыл бұрын
@@tran_quang_ngoc Is it really mandatory what happens if we don't remove it cuz I don't see any change
@TK-ot8dj
2 жыл бұрын
If event listeners are not removed, it will cause the memory leak for older browsers
@أميرالمؤمنينبنمحمدأكرم
7 ай бұрын
Cant do this with typescript
@WellingtonFernandes
4 ай бұрын
@@TK-ot8djI just suffered from this effect right now
@favazahammed4026
Жыл бұрын
thanks
@udittiwari8240
Жыл бұрын
Sooo good
@KamalSingh-tq8hk
Жыл бұрын
Why did you not put empty dependecy array in useEffect??
@romanmed9035
Жыл бұрын
but if i have more than one dropdowns? one dropdown is opened and i click on other dropdown. can i closed first and opened second dropdown?
@apoorv1441
Жыл бұрын
why do we need to clean up the event listener? i dint get that
@TK-ot8dj
Жыл бұрын
hi, great question. Cleaning up event listeners is an important practice in JavaScript. When you add an event listener to an element, it allows the element to respond to certain events, like clicks or keypresses. However, if you don't remove the event listener when you no longer need it, it can continue to consume memory and resources even after the element is no longer in use. By cleaning up the event listener, you ensure that resources are freed up and avoid potential memory leaks. It's good practice to remove event listeners when they are no longer needed, especially in web applications where memory management is crucial.
@apoorv1441
Жыл бұрын
@@TK-ot8dj so the return inside use effect only runs when the component unmounts?
@TK-ot8dj
Жыл бұрын
@@apoorv1441 Yes, you are correct. The return statement inside the `useEffect` function in React's functional components is used for cleanup. The code inside the return statement is executed when the component unmounts
@RoyaleRetro
Жыл бұрын
hay lắm a
@TK-ot8dj
Жыл бұрын
cảm ơn em nhé :)))
@AbidHasan-qb2zc
Жыл бұрын
Great
@koshgosh3081
Жыл бұрын
спасибо! все понятно с первого раза.
@OlaAkinwunmi-nw7yj
8 ай бұрын
Please I'm using pure JavaScript, how can I do this ?
@TK-ot8dj
8 ай бұрын
you can write something like this: "const dropdown = document.querySelector('.dropdown'); document.addEventListener('click', function (e) { if (e.target !== dropdown) { dropdown.classList.remove('open'); } }); "
@CSniper
Жыл бұрын
Here is good question, let's say the user clicks outside the menu, but clicks a link, then the user will be directed to that link when they only wanted to close the menu... How do we prevent this? I was thinking of doing e.preventDefault() but it does not work.
@CSniper
Жыл бұрын
I solved it, replaced eventListeners to click "document.addEventListener("click", handler, true" and added e.preventDefault(), then it worked. mousedown doesn't react to preventDefault
@ilhamrifai3714
Жыл бұрын
@@CSniper can i see that code? i have problem , if i click menu and redirect , the navbar not close
@bzchii7474
9 ай бұрын
@@CSniper make an onClick function on the link that changes the state of 'isOpen' so if a user clicks on the link, the menu closes
@NetraPatwari
7 ай бұрын
Thaxnksssss
@_kadirmetin
Жыл бұрын
Thanks for the video ✨
@Elias-xp3bs
Жыл бұрын
This was super helpful! The tutorial was very clear and had great explanations
@_xnv_
Жыл бұрын
Thanks
@minhnguyen86
Жыл бұрын
Amazing tutorial, this helps me a lot. Are bro come from Vietnamese ??
@TK-ot8dj
Жыл бұрын
Thank bro :))) yes, Im Vietnamese
@ava_qira
Жыл бұрын
It doesn't close after clicking the menu item. Is it possible to fix?
@TK-ot8dj
Жыл бұрын
yeah, you can fix this problem. you can add an `onClick` event handler to each `DropdownItem` component. In this event handler, you can call the `setOpen` function to close the menu by setting `open` state to `false`. function DropdownItem(props){ const handleItemClick = () => { setOpen(false); } return( {props.text} ); }
@dotslash2798
6 ай бұрын
Its work. thank you.
@unluckydude8882
Жыл бұрын
Do u do ur own css? It's Amazing!
@TK-ot8dj
Жыл бұрын
Thanks. Yes, I do it myself. You can watch how I built it from scratch in the previous video kzitem.info/news/bejne/rIiFzKNtr6d6eo4
@OgbonnaBlessed
25 күн бұрын
Thank you for making this video, it really helped me.
@MuhammadKhan-vm5ow
Жыл бұрын
Great Video, so informative and very professional, Thank you for you helps and dont stop making videos!
@MubeenKhan786
10 ай бұрын
If I click on one menu item then after visiting that page navbar should be closed.
@Charlie-yo2xt
9 ай бұрын
I have an error to : cont read a propities of undefined (reading 'contains')
@artemkazzakov6194
Жыл бұрын
Thanks it was helpfull for me. In typescript add "as Node" -(GPT tell to do it) in "if (!formRef.current?.contains(e.target as Node))" how do you think is it norm practis?
@TK-ot8dj
Жыл бұрын
I have no experience with TypeScript, but I plan to learn it in the near future :))
@aniltube3749
Жыл бұрын
Short and sweet cool explanation 💕
@M_Hosseini80
Жыл бұрын
Thank you! That was Helpful.
@vitaliisili
11 ай бұрын
Well explanation and super helpful
@emansem-e2s
15 сағат бұрын
great video
@ozoindaprince
11 ай бұрын
i have 2 dropdowns and they open and close at the same time
@atTran-yy7ce
5 ай бұрын
Very good knowledge, are you Vietnamese?
@johnasto7913
2 жыл бұрын
Great video man, it's exactly what I wanted to know about it. Keep it going!!
@chibykes_dev
2 жыл бұрын
Thanks Very helpful video
@amisoliman123
5 ай бұрын
You made it very easy thanks
@junyorff12
Жыл бұрын
Great video, one question, please make the font larger for me to watch on Smartphone. 🔥
@TK-ot8dj
Жыл бұрын
thanks for your advice, i will do better in the next video
@dheerajsharma355
7 күн бұрын
Great video!!
@lucoo3457
2 жыл бұрын
thanks, this was really helpful
@billy.n2813
Жыл бұрын
Nice, thank you!
@أميرالمؤمنينبنمحمدأكرم
7 ай бұрын
Cant do this with typescript
@christodoulopoulos9278
Жыл бұрын
Thank you, just what I needed
@mochacinoo
11 ай бұрын
thx for sharing
@soulriddle4793
Жыл бұрын
contains is not working
@jellyjollyjelly9513
7 ай бұрын
thank you so so much
@Vasilias-g9u
Жыл бұрын
Thanks Man
@alextruong1826
4 ай бұрын
Very easy to understand with the extra animations and illustrations! You even explained everything in details (whilst not overtalking about it) which made it even better! Millions thanks to your great work!
@martapfahl940
10 ай бұрын
Bro you helped me so much I couldnt figure it out for days! My mistake was placing the opening and closing button outside the div with the ref so it would open immediately after clicking the button again to close it.
@solo-yl8uc
Жыл бұрын
For me I have to add condition that is modal open before addevent listener, if I don't have a condition, useEffect will not remove EventListener , I don't know why this has happened.
@top_louie8304
Жыл бұрын
omg , thank you was struggling on this for a while ...
Пікірлер: 147