React is a popular Javascript library created by Facebook for building user interfaces. It provides a powerful way of DOM manipulation by introducing the concept of virtual DOM. It is mainly used to build single-page applications.
Some of the key features of React.js are:
- Performance
- One-way data flow
- Component-based
- Supports JSX
In this article, we will learn to add event listeners to the wrapping components, before we move forward let’s understand what are event listeners and how to react and work with these event listeners.
Event: 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: Run the following command to create a new React application (Make sure that you have NPM and Node installed).
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.
/src/Wrapper.jsx
Javascript
import React from 'react'const Wrapper = ({ children, handleClick }) => { return ( <div onClick={handleClick} style={{ border: '1px solid green' }}> {children} </div> )}export default Wrapper |
We’ll first delete all the boilerplate code and then import the wrapper component that we have just created. We’ll pass the event handler as a prop to the wrapper. (We’ve added some inline styling for better understanding.)
/src/App.js
Javascript
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; |
Step to run the application: Open the terminal and type the following command.
npm start
Output:
