How to use the handleChange() function in react component?

The handleChange() is not a built-in function in the React, but as its name suggests, we can define it to handle changes that users made in the input. In the react, we need to handle the input whenever a user enters some value in the input field to make it editable.

Here, we will learn to use the handleChange() function with single and multiple inputs.

Use the handleChange() function with functional components

In react, we can define the components using the function keyword and call them functional components. We can use hooks to manage the input value while using the functional components.

Syntax

Users can follow the syntax below to use the handleChange() function with functional components.

function handleChange(event) {
   let value = event.target.value;
}  
<input type = "text" onChange = {handleChange} value = {value} />

In the above syntax, we have used the onChange event attribute, which invokes the handleChange() function whenever changes occur in the input value. In the handleChange() function, we can get a new input value using the ?event.target.value?.

Example

In the example below, We have created the functional component which contains the text input field. Also, we have added the handleChange() function inside the functional component.

In the handleChange() function, we take the updated input value and use hooks to set it to the value variable. Also, we are showing the value of the ?value? variable in the output.

<div class="code-mirror  language-java" 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 class-name">React</span> from <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> from <span class="token string">"react"</span><span class="token punctuation">;</span>

function <span class="token class-name">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>value<span class="token punctuation">,</span> setValue<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"Initial"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   function <span class="token function">handleChange</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// gives the value of the targetted element</span>
      let value <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
      <span class="token function">setValue</span><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 generics"><span class="token punctuation"><</span>div<span class="token punctuation">></span></span>
         <span class="token generics"><span class="token punctuation"><</span>h3<span class="token punctuation">></span></span>
            <span class="token class-name">Using</span> the <span class="token generics"><span class="token punctuation"><</span>i<span class="token punctuation">></span></span> <span class="token function">handleChange</span><span class="token punctuation">(</span><span class="token punctuation">)</span> function <span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span> <span class="token keyword">with</span> <span class="token namespace">inputs</span> in <span class="token class-name">React</span>
            functional components<span class="token punctuation">.</span>
         <span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span>
         <span class="token operator"><</span>input type <span class="token operator">=</span> <span class="token string">"text"</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span> value <span class="token operator">=</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span>   <span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>div style <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"blue"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token string">" "</span><span class="token punctuation">}</span>
            <span class="token class-name">The</span> text entered in the input field is <span class="token punctuation">{</span>value<span class="token punctuation">}</span><span class="token punctuation">.</span><span class="token punctuation">{</span><span class="token string">" "</span><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>
export <span class="token keyword">default</span> <span class="token class-name">App</span><span class="token punctuation">;</span>
</div>

Output

Example

In the example below, we have created multiple inputs in a single functional component. We are using the single handleChange() function to handle all inputs. In the handleChange() function, we can get the name of the input using the ?event.target.name?, and based on the name, we use the function to set the input value.

Users can enter the value in the input field and observe how the single handleChange() function handles all inputs.

<div class="code-mirror  language-java" 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 class-name">React</span> from <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> from <span class="token string">"react"</span><span class="token punctuation">;</span>

function <span class="token class-name">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>id<span class="token punctuation">,</span> setId<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>firstName<span class="token punctuation">,</span> setFirstName<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"Shubham"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>lastName<span class="token punctuation">,</span> setLastName<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"Vora"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>age<span class="token punctuation">,</span> setAge<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">22</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   function <span class="token function">handleChange</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// gives the value of the targetted element</span>
      let value <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
      let inputName <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>inputName <span class="token operator">==</span> <span class="token string">"id"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token function">setId</span><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">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>inputName <span class="token operator">==</span> <span class="token string">"fname"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token function">setFirstName</span><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">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>inputName <span class="token operator">==</span> <span class="token string">"lname"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token function">setLastName</span><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">else</span> <span class="token punctuation">{</span>
         <span class="token function">setAge</span><span class="token punctuation">(</span>age<span class="token punctuation">)</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 generics"><span class="token punctuation"><</span>div<span class="token punctuation">></span></span>
         <span class="token generics"><span class="token punctuation"><</span>h3<span class="token punctuation">></span></span>
            <span class="token class-name">Using</span> the <span class="token generics"><span class="token punctuation"><</span>i<span class="token punctuation">></span></span> <span class="token function">handleChange</span><span class="token punctuation">(</span><span class="token punctuation">)</span> function <span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span> <span class="token keyword">with</span> <span class="token namespace">inputs</span> in <span class="token class-name">React</span>
            functional components<span class="token punctuation">.</span>
         <span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span>
         <span class="token operator"><</span>label <span class="token keyword">for</span> <span class="token operator">=</span> <span class="token string">"Id"</span><span class="token operator">></span> <span class="token class-name">Id</span> <span class="token operator"><</span><span class="token operator">/</span>label<span class="token operator">></span>
         <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>input type <span class="token operator">=</span> <span class="token string">"text"</span> id <span class="token operator">=</span> <span class="token string">"Id"</span> name <span class="token operator">=</span> <span class="token string">"id"</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span> value <span class="token operator">=</span> <span class="token punctuation">{</span>id<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>label <span class="token keyword">for</span> <span class="token operator">=</span> <span class="token string">"fname"</span><span class="token operator">></span> <span class="token class-name">First</span> <span class="token class-name">Name</span> <span class="token operator"><</span><span class="token operator">/</span>label<span class="token operator">></span>
         <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>input
            type <span class="token operator">=</span> <span class="token string">"text"</span>
            id <span class="token operator">=</span> <span class="token string">"fname"</span>
            name <span class="token operator">=</span> <span class="token string">"fname"</span>
            onChange <span class="token operator">=</span> <span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span>
            value <span class="token operator">=</span> <span class="token punctuation">{</span>firstName<span class="token punctuation">}</span>
         <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>label <span class="token keyword">for</span> <span class="token operator">=</span> <span class="token string">"lname"</span><span class="token operator">></span> <span class="token class-name">Last</span> <span class="token class-name">Name</span> <span class="token operator"><</span><span class="token operator">/</span>label<span class="token operator">></span>
         <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>input
            type <span class="token operator">=</span> <span class="token string">"text"</span>
            id <span class="token operator">=</span> <span class="token string">"lname"</span>
            name <span class="token operator">=</span> <span class="token string">"lname"</span>
            onChange <span class="token operator">=</span> <span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span>
            value <span class="token operator">=</span> <span class="token punctuation">{</span>lastName<span class="token punctuation">}</span>
         <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>label <span class="token keyword">for</span> <span class="token operator">=</span> <span class="token string">"age"</span><span class="token operator">></span> <span class="token class-name">Age</span> <span class="token operator"><</span><span class="token operator">/</span>label<span class="token operator">></span>
         <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>input
            type <span class="token operator">=</span> <span class="token string">"text"</span>
            id <span class="token operator">=</span> <span class="token string">"age"</span>
            name <span class="token operator">=</span> <span class="token string">"age"</span>
            onChange <span class="token operator">=</span> <span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span>
            value <span class="token operator">=</span> <span class="token punctuation">{</span>age<span class="token punctuation">}</span>
         <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>br <span class="token operator">/</span><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>

export <span class="token keyword">default</span> <span class="token class-name">App</span><span class="token punctuation">;</span>
</div>

Output

Use the handleChange() function with class components

We can create class components using the class keyword in ReactJS. We can?t use hooks to manage variables with class components. So, we need to use state with class components.

Also, whenever we use the handleChange() method with the class components, we need to bind the method in the constructor.

Syntax

Users can follow the syntax below to use the handleChange() function with class components.

handleChange(event) {
   this.state.text = event.target.value;
}
<input onChange = {this.handleChange} name = "text" />

In the above syntax, we update the state value whenever changes occur in the input value.

Example

In the example below, we have created the class component containing the input field. We have also added the handleChage() method on the input field.

Whenever the user changes the input value, we invoke the handleChange() method, which updates the component's state.

<div class="code-mirror  language-java" 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 class-name">React</span> from <span class="token string">"react"</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
   <span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
         text<span class="token operator">:</span> <span class="token string">"Sample"</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>handleChange <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
   <span class="token function">handleChange</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>text <span class="token operator">=</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 function">render</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 generics"><span class="token punctuation"><</span>div<span class="token punctuation">></span></span>
            <span class="token generics"><span class="token punctuation"><</span>h2<span class="token punctuation">></span></span>
               <span class="token punctuation">{</span><span class="token string">" "</span><span class="token punctuation">}</span>
               <span class="token class-name">Using</span> the <span class="token generics"><span class="token punctuation"><</span>i<span class="token punctuation">></span></span> <span class="token function">handleChange</span><span class="token punctuation">(</span><span class="token punctuation">)</span> function <span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span> in <span class="token class-name">ReactJs</span> <span class="token keyword">with</span> <span class="token keyword">class</span>
               components<span class="token punctuation">.</span><span class="token punctuation">{</span><span class="token string">" "</span><span class="token punctuation">}</span>
            <span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span>
            <span class="token operator"><</span>input onChange <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span> name <span class="token operator">=</span> <span class="token string">"text"</span> <span class="token operator">/</span><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 punctuation">}</span>
export <span class="token keyword">default</span> <span class="token class-name">App</span><span class="token punctuation">;</span>
</div>

Output

Users learned to use the handleChange() function with the input field in react class and functional components. Also, we learned to handle multiple inputs with single handleChange() function.