ReactJS | Create an Event-Aware Component

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about how to create an React Event-Aware component.

Let us start by creating a new component, MessageWithEvent and handle events in the component to have a better understanding of event management in React application.

Open expense-manager application in your favorite editor.

Next, create a file, MessageWithEvent.js in the src/component folder in order to create MessageWithEvent component.

Import React library.

import React from 'react';

Next, create a class, MessageWithEvent and call constructor with props.

class MessageWithEvent extends React.Component {   
   constructor(props) { 
      super(props); 
   } 
}

Next, you have to create an event handler method, logEventToConsole, which will log event details to the console.

logEventToConsole(e) { 
   console.log(e.target.innerHTML); 
}

Next, create a render function.

render() { 
}

Next, create a greeting message and return it.

render() {
   return (
      <div>
         <p>Hello {this.props.name}!</p>
      </div>
   );
}

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>
   );
}

Next, 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 full source code of 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;

Next, you have to 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')
);

Next, serve the application making use of npm command.

npm start

Next, open the web browser and then enter http://localhost:3000 in the address bar and press enter.

Now, click MessageWithEvent component and the application will display messages in the console as shown below.

READ: ReactJS | Event Management

Let us try to pass an extra information (for example, msgid) to event handler.

Update the logEventToConsole to accept an extra argument, msgid.

logEventToConsole(msgid, e) { 
   console.log(e.target.innerHTML); 
   console.log(msgid); 
}

Next, pass message id to the event handler by simply binding the message id in render method.

render() {
   return (
      <div onClick={this.logEventToConsole.bind(this, Math.floor(Math.random() * 10))}>
         <p>Hello {this.props.name}!</p>
      </div>
   );
}

The complete and updated source 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.

READ: ReactJS | Component Collection

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about how to introduce Events in Expense Manager App.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.