ReactJS - Create a Event-Aware Component

Let us create a new component, MessageWithEvent and handle events in the component to better understand event management in React application.
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';

Next, create a class, MessageWithEvent and call constructor with props.
class MessageWithEvent extends React.Component {   
   constructor(props) { 
      super(props); 
   } 
}
Next, 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>
   );
}
Next, 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 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;
Next, open index.js and import MessageWithEvent.
import MessageWithEvent from './components/MessageWithEvent'

Next, 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 using npm command.
npm start

Next, 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.
Let us try to pass and an extra information (for example, msgid) to event handler.
First, 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 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>
   );
}
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.

    20 Lectures 
     1.5 hours 

 Anadi Sharma

    60 Lectures 
     4.5 hours 

 Skillbakerystudios

    165 Lectures 
     13 hours 

 Paul Carlo Tordecilla

    63 Lectures 
     9.5 hours 

 TELCOMA Global

    17 Lectures 
     2 hours 

 Mohd Raqif Warsi
 Print
 Add Notes
 Bookmark this page