How do I pass an event handler to a component in ReactJS?

Reactjs is an open source javascript library, used in web development to build interactive pages in websites. Reactjs provides user friendly, declarative, and precise.

Components

Components are individualistic and reusable bits of code in react js. It helps to create separate files for our class and function. In general components are two types? class components and function components.

Event Handlers

Event handlers define what action to be performed when an event is fired or triggered. Events in react preceded with "on" for example onClick, and onFocus.

Event handler in react is just like DOM in HTML, react has also same handler ? (click,mouse,and hover, etc).

Note ? All events in react are named using camelCase and react handler should be written in curly braces.

To work with React, first of all, you need to import the library "react" using the following statement ?

import React from "react"

Also import dom elements as ?

import ReactDom from 'react-dom/client';

There are various types of event handlers they are ?

• Event handler ?

• Inline event handler ?

• Call back event handler ?

Passing (normal) Event handlers to components

First, we will start with onClick event handlers in react, it is the most basic example of how to operate events in react with event handlers. A button has onClick attributes which receive the function. This function is called every time an event is triggered.

Example 1

Following is an example of event handlers. In the UI we are creating a button named "click me" and we are linking the onClick event with the show() method.

Therefore, When you click the button the contents of this method will be executed. In this function, we are writing a code to display an alert message.

When you click on the button an "onClick" event will be triggered and this will show your Name.

<div class="code-mirror  language-javascript" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>show<span class="token punctuation">}</span> <span class="token operator">></span> show is a <span class="token keyword">function</span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span>
<span class="token keyword">import</span> ReactDom from ?react<span class="token operator">-</span>dom<span class="token operator">/</span>client?<span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">showName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   Const <span class="token function-variable function">show</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"your Name"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
   <span class="token keyword">return</span><span class="token punctuation">(</span><span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>show<span class="token punctuation">}</span> <span class="token operator">></span>click me<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
Const root <span class="token operator">=</span> ReactDom<span class="token punctuation">.</span><span class="token function">createRoot</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>?root?<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>showName <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">)</span>
</div>

Example 2

Let us another example here we are performing Increment and decrement operations to a number.

App.js

<div class="code-mirror  language-javascript" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">import</span> <span class="token string">'./App.css'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> react<span class="token punctuation">,</span><span class="token punctuation">{</span>useState<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// this function which computes the increment and decrement, initial value of count is 0</span>
   <span class="token keyword">const</span> <span class="token function-variable function">inc</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
      <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
   <span class="token keyword">const</span> <span class="token function-variable function">dec</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
      <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
   <span class="token keyword">const</span> <span class="token function-variable function">handleChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
      <span class="token function">setCount</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
   <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"App"</span><span class="token operator">></span>
         <span class="token operator"><</span>button className<span class="token operator">=</span><span class="token string">'inc'</span> type<span class="token operator">=</span><span class="token string">'button'</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>inc<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator">+</span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
         <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> value<span class="token operator">=</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>button className<span class="token operator">=</span><span class="token string">'dec'</span> type<span class="token operator">=</span><span class="token string">'button'</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>dec<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator">-</span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</div>

You can also add the following CSS code to this application. Save this with name App.css and import it in yor App.js as: import "./App.css";

In the following example, data type float is not supported if you pass float value as an argument then evaluation is false. isSafeInteger() method only supports the Integer value in their range otherwise it gives false.

<div class="code-mirror  language-javascript" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token punctuation">.</span>App<span class="token punctuation">{</span>
   display<span class="token operator">:</span> flex<span class="token punctuation">;</span>
   align<span class="token operator">-</span>items<span class="token operator">:</span> center<span class="token punctuation">;</span>
   justify<span class="token operator">-</span>content<span class="token operator">:</span> center<span class="token punctuation">;</span>
   position<span class="token operator">:</span> absolute<span class="token punctuation">;</span>
   top<span class="token operator">:</span> <span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">;</span>
   left<span class="token operator">:</span> <span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">;</span>
   transform<span class="token operator">:</span> <span class="token function">translate</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>inc<span class="token punctuation">{</span>
   background<span class="token operator">:</span> green<span class="token punctuation">;</span>
   color<span class="token operator">:</span> red <span class="token punctuation">;</span>
   font<span class="token operator">-</span>size<span class="token operator">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>dec<span class="token punctuation">{</span>
   background<span class="token operator">:</span> red<span class="token punctuation">;</span>
   color<span class="token operator">:</span> green<span class="token punctuation">;</span>
   font<span class="token operator">-</span>size<span class="token operator">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
input<span class="token punctuation">{</span>
   background<span class="token operator">-</span>color<span class="token operator">:</span> aquamarine<span class="token punctuation">;</span>
   font<span class="token operator">-</span>size<span class="token operator">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</div>

Passing Inline Event handlers to components

Inline event handlers is also called as inline handlers. It will pass in the htmls tags, inline event handlers are easy to pass and we no need to call separate functions.

Example

Following is an example of inline event handlers. We are calling two function through inline way. First is increasing the count second is decreasing the count.

<div class="code-mirror  language-javascript" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>show<span class="token punctuation">}</span> <span class="token operator">></span> show is a <span class="token keyword">function</span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"App"</span><span class="token operator">></span>
      Count<span class="token operator">:</span> <span class="token punctuation">{</span>count<span class="token punctuation">}</span>
      <span class="token operator"><</span>button type<span class="token operator">=</span><span class="token string">"button"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">></span>
         Increase Count
      <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
      <span class="token operator"><</span>button type<span class="token operator">=</span><span class="token string">"button"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">></span>
         Decrease Count
      <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</div>

You can also add the following CSS code to this App.css. and import it in yor App.js as: import "./App.css"; then it will looks like same as given output.

<div class="code-mirror  language-javascript" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;">button<span class="token punctuation">{</span>
   background<span class="token operator">-</span>color<span class="token operator">:</span> green<span class="token punctuation">;</span>
   color<span class="token operator">:</span> aliceblue<span class="token punctuation">;</span>
   padding<span class="token operator">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span>
   margin<span class="token operator">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span>
   border<span class="token operator">-</span>radius<span class="token operator">:</span> <span class="token number">5</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</div>

Passing Call back Event Handler to handlers

Last but not least, call back event handlers or call back handlers. They are in use when a child component needs to be communicated with parent components is known as call back event handlers.

Example

Following is an example of call back event handlers.

<div class="code-mirror  language-javascript" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>show<span class="token punctuation">}</span> <span class="token operator">></span> show is a <span class="token keyword">function</span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>text<span class="token punctuation">,</span> setText<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">function</span> <span class="token function">handleTextChange</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">setText</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
   <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"App"</span><span class="token operator">></span>
      <span class="token operator"><</span>div<span class="token operator">></span><span class="token operator"><</span>MyInput inputValue<span class="token operator">=</span><span class="token punctuation">{</span>text<span class="token punctuation">}</span> onInputChange<span class="token operator">=</span><span class="token punctuation">{</span>handleTextChange<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
      <span class="token punctuation">{</span>text<span class="token punctuation">}</span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">MyInput</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> inputValue<span class="token punctuation">,</span> onInputChange <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> value<span class="token operator">=</span><span class="token punctuation">{</span>inputValue<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span>onInputChange<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</div>

Conclusion

React event handler is similar to html event handler only with some differences of syntax it is easy to use ?this? keyword is common in both. This is a JavaScript behavior not a react behavior. Reactjs is a JavaScript library. We have discussed event handling using ?click? but there are many other event handlers and all the above rules apply to them as well.