Skip to content

A simple react project showing different methods for handling form inputs in a React application. Includes examples of using `useState`, refs, and the native `FormData` API to manage and validate form data.

Notifications You must be signed in to change notification settings

trishna456/react-forms

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Forms Input Project

This project demonstrates various methods for handling form inputs in a React application. It includes examples of using useState, refs, and the native FormData API to manage and validate form data.

Features

  1. useState: Utilizes the useState hook to manage form state and handle data within the onSubmit function.
  2. Refs: Uses refs to directly access DOM elements and retrieve their values.
  3. FormData API: Employs the native FormData API provided by the browser to collect form data.

How to Handle Form Inputs

  1. useState: Set the onChange prop on inputs to update the state, and handle all data inside the onSubmit function.
  2. Refs: Use refName.current.value to get the input values.
  3. FormData API: Ensure all input fields have the name prop set. For nested or grouped inputs like checkboxes, use fd.getAll() and combine it with the rest of the object attributes.

Getting Started

To run this project locally, follow these steps:

  1. Clone this repository to your local machine:
git clone https://github.com/trishna456/forms.git
  1. Navigate to the project directory:
cd forms
  1. Install dependencies using npm or yarn:
npm install
# or
yarn install
  1. Start the development server:
npm start
# or
yarn start
  1. Open your web browser and navigate to http://localhost:3000 to view the project.

About

A simple react project showing different methods for handling form inputs in a React application. Includes examples of using `useState`, refs, and the native `FormData` API to manage and validate form data.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published