![ReactJS Tutorial](/reactjs/images/reactjs-mini-logo.jpg)
- ReactJS Tutorial
- ReactJS - Home
- ReactJS - Introduction
- ReactJS - Installation
- ReactJS - Features
- ReactJS - Advantages & Disadvantages
- ReactJS - Architecture
- ReactJS - Creating a React Application
- ReactJS - JSX
- ReactJS - Components
- ReactJS - Nested Components
- ReactJS - Using Newly Created Components
- ReactJS - Component Collection
- ReactJS - Styling
- ReactJS - Properties (props)
- ReactJS - Creating Components using Properties
- ReactJS - props Validation
- ReactJS - Constructor
- ReactJS - Component Life Cycle
- ReactJS - Event management
- ReactJS - Creating an Event−Aware Component
- ReactJS - Introduce Events in Expense Manager APP
- ReactJS - State Management
- ReactJS - State Management API
- ReactJS - Stateless Component
- ReactJS - State Management Using React Hooks
- ReactJS - Component Life Cycle Using React Hooks
- ReactJS - Layout Component
- ReactJS - Pagination
- ReactJS - Material UI
- ReactJS - Http client programming
- ReactJS - Form Programming
- ReactJS - Controlled Component
- ReactJS - Uncontrolled Component
- ReactJS - Formik
- ReactJS - Conditional Rendering
- ReactJS - Lists
- ReactJS - Keys
- ReactJS - Routing
- ReactJS - Redux
- ReactJS - Animation
- ReactJS - Bootstrap
- ReactJS - Map
- ReactJS - Table
- ReactJS - Managing State Using Flux
- ReactJS - Testing
- ReactJS - CLI Commands
- ReactJS - Building and Deployment
- ReactJS - Example
- Hooks
- ReactJS - Introduction to Hooks
- ReactJS - Using useState
- ReactJS - Using useEffect
- ReactJS - Using useContext
- ReactJS - Using useRef
- ReactJS - Using useReducer
- ReactJS - Using useCallback
- ReactJS - Using useMemo
- ReactJS - Custom Hooks
- ReactJS Advanced
- ReactJS - Accessibility
- ReactJS - Code Splitting
- ReactJS - Context
- ReactJS - Error Boundaries
- ReactJS - Forwarding Refs
- ReactJS - Fragments
- ReactJS - Higher Order Components
- ReactJS - Integrating With Other Libraries
- ReactJS - Optimizing Performance
- ReactJS - Profiler API
- ReactJS - Portals
- ReactJS - React Without ES6 ECMAScript
- ReactJS - React Without JSX
- ReactJS - Reconciliation
- ReactJS - Refs and the DOM
- ReactJS - Render Props
- ReactJS - Static Type Checking
- ReactJS - Strict Mode
- ReactJS - Web Components
- Additional Concepts
- ReactJS - Date Picker
- ReactJS - Helmet
- ReactJS - Inline Style
- ReactJS - PropTypes
- ReactJS - BrowserRouter
- ReactJS - DOM
- ReactJS - Carousel
- ReactJS - Icons
- ReactJS - Form Components
- ReactJS - Reference API
- ReactJS Useful Resources
- ReactJS - Quick Guide
- ReactJS - Useful Resources
- ReactJS - Discussion
ReactJS - Create an Event-Aware Component
Event management is one of the important features in a web application. It enables the user to interact with the application. React supports all events available in a web application. React event handling is very similar to DOM events with little changes. For example, clicking on a component is one of the common events one can observe in React-based websites.
An event-aware component in React is nothing but a component that contains an event handler method within it. The component can either be a class component or functional component. In this chapter, we will learn how to create such event-aware components with React.
How to create an Event-Aware Component?
Following are the steps to create a new Event-Aware Component −
Let us create a new component, MessageWithEvent and handle events in the component to better understand event management in React application.
Step 1 − Open expense-manager application in your favorite editor.
Next, create a file, MessageWithEvent.js in src/components folder to create MessageWithEvent component.
Import React library.
import React from 'react';
Step 2 − Create a class, MessageWithEvent and call constructor with props.
class MessageWithEvent extends React.Component { constructor(props) { super(props); } }
Step 3 − Create an event handler method, logEventToConsole, which will log event details to the console.
logEventToConsole(e) { console.log(e.target.innerHTML); }
Step 4 − Create a render function.
render() { }
In render() function, create a greeting message and return it.
render() { return ( <div> <p>Hello {this.props.name}!</p> </div> ); }
Step 5 − Then, set logEventToConsole method as the event handler for click event of the root container(div).
render() { return ( <div onClick={this.logEventToConsole}> <p>Hello {this.props.name}!</p> </div> ); }
Step 6 − Update the constructor by binding the event handler.
class MessageWithEvent extends React.Component { constructor(props) { super(props); this.logEventToConsole = this.logEventToConsole.bind(); } }
Finally, export the component.
export default MessageWithEvent;
The complete code of the MessageWithEvent component is given below −
import React from 'react'; class MessageWithEvent extends React.Component { constructor(props) { super(props); this.logEventToConsole = this.logEventToConsole.bind(); } logEventToConsole(e) { console.log(e.target.innerHTML); } render() { return ( <div onClick={this.logEventToConsole}> <p>Hello {this.props.name}!</p> </div> ); } } export default MessageWithEvent;
index.js
Next, open index.js and import MessageWithEvent.
import MessageWithEvent from './components/MessageWithEvent'
Build the user interface of the application by using MessageWithEvent component.
import React from 'react'; import ReactDOM from 'react-dom'; import MessageWithEvent from './components/MessageWithEvent' ReactDOM.render( <React.StrictMode> <div> <MessageWithEvent name="React" /> <MessageWithEvent name="React developer" /> </div> </React.StrictMode>, document.getElementById('root') );
Serve the application using npm command.
npm start
Open the browser and enter http://localhost:3000 in the address bar and press enter.
Now, click both MessageWithEvent component and the application will emit messages in the console as shown below.
![React Modules](/reactjs/images/react_modules.jpg)
Passing Extra Information to Event Handler
Let us try to pass and an extra information (for example, msgid) to event handler.
Step 1 − First, update the logEventToConsole to accept an extra argument, msgid.
logEventToConsole(msgid, e) { console.log(e.target.innerHTML); console.log(msgid); }
Step 2 − Next, pass message id to the event handler by binding the message id in the render method.
render() { return ( <div onClick={this.logEventToConsole.bind(this, Math.floor(Math.random() * 10))}> <p>Hello {this.props.name}!</p> </div> ); }
Step 3 − The complete and updated code is as follows −
import React from 'react'; class MessageWithEvent extends React.Component { constructor(props) { super(props); this.logEventToConsole = this.logEventToConsole.bind(); } logEventToConsole(msgid, e) { console.log(e.target.innerHTML); console.log(msgid); } render() { return ( >div onClick={this.logEventToConsole.bind(this, Math.floor(Math.random() * 10))}> >p>Hello {this.props.name}!>/p> >/div> ); } } export default MessageWithEvent;
Run the application and you will find that the event emits message id in the console.
![React Module](/reactjs/images/react_module.jpg)