How to add Event Listeners to wrapped Component in ReactJS ?

Last Updated : 25 Jul, 2024

React provides a powerful way of DOM manipulation by introducing the concept of virtual DOM. It is mainly used to build single-page applications. There are times when you need to add event listeners. This can be achieved by using the concept of forwarding refs and leveraging React’s lifecycle methods.

Prerequisites

In this article, we will learn how to add event listeners to the wrapping components. Before we move forward let’s understand what are event listeners and how to work with these event listeners.

Events:

Events are actions that could be triggered by the user’s interaction with our application. For example – Mouse Click, Hover, Keyboard inputs, etc.

Event Listeners:

Event listeners are the functions that listen for some events happening and execute when that event happens.

Event Handling in React:

Working with events in React is similar to working with DOM events.

In React, events are written in the camel case. For Example, onclick in HTML becomes onClick in React.
In React, events we pass functions instead of strings.

Adding Event Listeners to Wrapped Components:

npx create-react-app gfg

Project Structure:

For the scope of this tutorial, we will only focus on the src directory. Create a new component called Wrapper.jsx in the src folder. We’ll add an event listener on this component from our home page through prop passing. (Note: Custom components don’t have events, here they are treated as normal props.)

Here we’ll create a simple wrapper component that adds a border to its children. It’ll accept two props, children which will contain the contents inside the wrapper component & a click handler function that will work as an event handler in the wrapper component.

Example: Write the following in Wrapper.js and App.js file respectively

JavaScript

// Wrapper.js

import React from 'react'

const Wrapper = ({ children, handleClick }) => {
    return (
        <div onClick={handleClick}
             style={{ border: '1px solid green' }}>
             {children}
        </div>
    )
}

export default Wrapper

JavaScript

// App.js

import React from "react";
import Wrapper from "./Wrapper";
const App = () => {

    // This function will execute whenever
    // the wrapper will be clicked.
    const onClickHandler = () => {
        alert("Wrapper got clicked!!");
    };
    return (
        <div style={{ padding: "2rem" }}>
            {/* We passed onClick handler as 
            a prop which will be added to the 
            top element of the wrapper as a
            event listener
            */}
            <Wrapper handleClick={onClickHandler}>
                <h1>Hello Geeks</h1>
            </Wrapper>
        </div>
    );
};

export default App;