Detect Outside Click for Any Element in React JS

Detect outside click in React JS. Consider a simple div or any element in React JS. We can use onClick to add click event to any element and use an event handler function to detect this click and do something. But how can we detect outside click in react js? This is very helpful in creating menus and such elements. A menu should close on outside click. So in this case we need to detect click outside of menu.
First of all we need a reference point around concerned element. To do that we will need useRef hook in React. We will import useRef from react at top of component. We will also need useEffect hook. Then we will use useRef hook and name it with it's initial value as null.
A common use case of useRef is to access a child element or any element. It can be used to access a DOM element directly. Now we can use refOne to mark a DOM element. We can add a click event listener for the document. We do that in useEffect. Now as the component loads, it is listening to the click event. We will get this event target in function that was triggered as result of click. Now e target contains the clicked element. If clicked event target is not our div with reference, then we can do something. As simple as that. So this is how by using simple click event listener in useEffect and using useRef hook, we can detect if a particular element is being clicked or not in ReactJS.
IMPORTANT: Do not forget to clear that eventlistener in useEffect after you initialize it otherwise it can make app slow and you may see performance issues. To do that, just return a function and use removeEventListener at the end of but inside useEffect.
This video answers following questions:
How to detect outside click
Detect click outside element
Detect a click outside an element
How to detect a click outside an element
Detect outside click in react
Detect outside click in react component
✅ Display Data From JSON File in React
• Display Data from JSON...
✅ Display Icons / Images from JSON File in React JS
• Display Icons / Images...
✅ Fetch All Types of Data from JSON File in React JS
• Fetch All Types of Dat...
✅ 7 Ways to use Images in React JS
• 7 Ways to Use Images i...
✅ Easy Way to use Images in React JS
• Easy Way to Use Images...
✅ Require Image Not Working in React JS
• Require Image Not Work...
✅ Multiple Images in One Import
• Multiple Images in ONE...
✅ Multiple Sets of Images from One Import in React JS
• Multiple Sets of Image...
✅ Default Map is not a Function in React JS
• Default MAP is Not a F...
✅ Async Await Fetch in React JS
• Async Await Fetch Data...
✅ Assigned a Value but Never Used
• Assigned a Value but N...
✅ Easily Sort Before Displaying Records in React JS
• Sort Data Before Displ...
✅ Responsive Image Gallery from Scratch in React JS
• Build Photo Gallery fr...
✅ ReactJS Playground
• ReactJS Playground
✅ JavaScript Problem Solving:
bit.ly/JavsScri...
✅ Web Development Essentials:
bit.ly/WebDevEs...
✅ Crash Courses:
bit.ly/WSPCrash...
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: / webstylepress
Website: www.webstylepr...
FaceBook: / webstylepress
Twitter: / webstylepress
GitHub: github.com/web...
#JS #ReactJS #React #JavaScript #useRef #useEffect #ReactHooks #hooks #WebStylePress #webdevelopment

[@himanshudhariwal4046]

This was super simple to understand, thank you so much

[@جعفرمنطقیبیگ]

Amazing! Thank you so much...

[@focusroom_]

Excellent, thanks!

[@wyarn]

thank you man!!

[@ronberrbi3865]

thanks again!

[@mainakmukhrjee6328]

Amazing tutorial I was trying to create similar effect as happens when u click search bar on linkedin navbar and below portion gets hidden while clicking anywhere else reverts it back Thanks!

[@lionciomorcilla3045]

Thanks man 😁

[@vhugoxgnu]

Thank you!

[@david-Jik4l]

thank you sir 👍

[@yashm05]

nice and clear 😍

[@Fashionistanono]

what theme is your visual studio on?

[@mohammadmehdikhani1398]

thaks sir

[@nafisabdullah3331]

thanks a lot

[@sharafaoluwatobibashiru1913]

Bless you👏👏👏👏🙏🙏🙏🙏🥰

[@webstylepress]

Bless you too

[@aadargupta]

I'm trying to make an element hide when its clicked outside the div but I can error of cannot read contains of null

[@adityasingh4299]

same

[@adityasingh4299]

@webStylePress could you please look into it

[@Spade2351]

only thing you forgot was adding the removeEvent when the component unmounts

[@webstylepress]

Good point. Thanks.

[@antoniokrzelj166]

I love u bro

[@Richard-wg4lu]

Now do this with two div