How to detect click outside React component ?
We can use the createRef() method to create a reference for any element in the class-based component. Then we can check whether click event occurred in the component or outside the component.
In the functional component, we can use the useRef() hook to create a reference for any element.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
Project Structure: It will look like the following.
App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Filename- App.js: Using Class base Component
Filename- App.js:< Using Functional Component/p>
Step to Run Application: Run the application using the following command from the root directory of the project:
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: