onChange Event handler in ReactJs.How to use it
The onChange event handler is a prop that you can pass into JSX <input> elements.
This prop is provided by React so that your application can listen to user input in real-time.
When an onChange event occurs, the prop will call the function you passed as its parameter.
Here’s an example of the onChange event in action
This example is a simple React component called Myform that renders an input field. Let's break down the code and explain how it works.
1. The import { useState } from "react"; statement imports the useState hook from the React library. However, in this code, the useState hook is not being used.
2. The Myform function component is defined. In React, components are reusable building blocks that encapsulate a piece of user interface.
3. Inside the Myform component, a function named showchange is defined. This function is an event handler that will be triggered whenever the value of the input field changes.
4. The console.log(event.target.value); statement logs the current value of the input field to the console. The event.target.value expression represents the value entered in the input field that triggered the event.
5. The return statement inside the Myform component returns JSX (JavaScript XML) code, which represents the structure and content of the component's rendered output.
6. In the JSX code, an <input> element is rendered with a type attribute set to "text" and a name attribute set to "t1". The onChange event handler is assigned to the onChange prop of the input field. This means that whenever the value of the input field changes, the showchange function will be called.
7. Finally, the export default Myform; statement exports the Myform component so that it can be imported and used in other parts of the application.
In summary, this code renders an input field and logs the value entered in the field to the console whenever it changes.
You can also declare a function right inside the onChange prop like this:
This example is a simple React component called Myform that uses the useState hook from React to manage the state of a variable called name.
The useState hook is a function provided by React that allows you to add state to functional components. It takes an initial value as an argument and returns an array with two elements: the current state value and a function to update that value.
In this example, the useState hook is used to initialize the name state variable with an empty string. The setName function is used to update the value of name.
The Myform component renders a <div> element that contains an <input> element of type “text”. The onChange event handler is attached to the <input> element and calls the changeName function whenever the user types something in the input field.
The changeName function takes an event object as its parameter and uses the setName function to update the name state variable with the current value of the input field. This causes a re-render of the component, and the updated name value is displayed in an <h1> element with the text “Hello, “ before the name.
In summary, this example demonstrates the usage of the useState hook to create a simple form input that updates and displays the value of the name state variable as the user types in the input field.