How to handle input forms with useState Hook in React ? Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report Handling input forms with useState in React involves creating state variables to store the values of input fields and updating them as the user interacts with the form. Handling input forms with useState:State Variables: Define state variables to hold the values of input fields. Each input field typically has its own state variable.Binding Input Values: Bind the value of each input field to its corresponding state variable. This ensures that the input field displays the current value stored in the state.Event Handlers: Create event handler functions to update the state variables as the user enters or modifies input. These functions typically listen for events like onChange for text inputs or onClick for buttons.Updating State: When the user interacts with the input fields, the event handlers update the state variables using setState, triggering a re-render to reflect the changes in the UI.Submitting the Form: When the user submits the form, you can access the values stored in the state variables to perform further actions, such as validation or sending data to a server.Example: Below is an example of handling input forms with useState. JavaScript import React, { useState } from 'react'; import './App.css'; const FormExample = () => { const [name, setName] = useState(''); const [email, setEmail] = useState(''); // Event handlers to update state variables const handleNameChange = (event) => { setName(event.target.value); }; const handleEmailChange = (event) => { setEmail(event.target.value); }; const handleSubmit = (event) => { // Prevent default form submission event.preventDefault(); console.log('Name:', name); console.log('Email:', email); }; return ( <div className="form-container"> <h2>Input Form</h2> <form onSubmit={handleSubmit}> <div className="form-group"> <label>Name:</label> <input type="text" value={name} onChange={handleNameChange} /> </div> <div className="form-group"> <label>Email:</label> <input type="email" value={email} onChange={handleEmailChange} /> </div> <button type="submit">Submit</button> </form> </div> ); }; export default FormExample; CSS .form-container { max-width: 400px; margin: auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="email"] { width: 100%; padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; } button { padding: 10px 20px; font-size: 16px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } Output: Output Comment More infoAdvertise with us Next Article How to handle input forms with useState Hook in React ? F faheemakt6ei Follow Improve Article Tags : Web Technologies ReactJS MERN-QnA WebTech-FAQs Similar Reads How to handle forms in React ? In React, Form handling is one of the basic and important concepts that every developer should learn about. Forms are used to collect the data so that we can use the data for various purposes. This article, lets us understand form handling in React along with examples.Prerequisites:JSXReactuseStateF 6 min read How to Handle Forms in Material UI ? In Material UI, managing forms is made easy with a variety of intuitive components and features. It streamlines user input and validation processes in React applications by utilizing form components such as TextField, Select, and Checkbox. Installationnpm install @mui/material @emotion/react @emotio 2 min read State Management with useState Hook in React useState is a built-in hook that empowers functional components to manage state directly, eliminating the need for class-based components or external state management libraries for simple use cases. It provides an easy mechanism to track dynamic data within a component, enabling it to React to user 3 min read Can you explain what the useState hook does in React Hooks? The useState hook is a feature in React Hooks that allows you to add state to functional components. It creates state variables and manages their values within a functional component. Why is useState important?Before introducing hooks in React, state management was only possible in class components. 2 min read How to Work with and Manipulate State in React ? Working with and Manipulating state in React JS makes the components re-render on the UI by Updating the DOM tree. It makes sure to render the latest information and data on the interface. Prerequisites:NPM & Node.jsReact JSState in React JSReact JS Class componentsReact JS Functional Components 6 min read Like