Working with Forms in React

react-forms.md

Table of Contents

1. The purpose for forms
2. How to create React Forms
3. Handling Events
4. State Management in React Forms
5. Use of Fetch API

The Purpose of Forms

Forms are primarily created to allow enable users provide useful data. We create forms using the <form> element

In react , forms are controlled.

How to Create React Forms

React forms are created like HTML forms with few exceptions .

• To submit a form field , attach an event using the JSX notation on the form
• Form fields should be created with default value. Changes to this value is a change in state.
• Add particular events of interest to the form fields
• Favour dynamic validation over static validation (validation after form input entry)

` import React , {useState} from "react" ;

const SignupForm = () => {

let [email , setEmail] = useState("") ;

const handleInput = e => {

  let {value} = e.target ;
  
  if (value.length !== 0 && value !== ""){
  
     setEmail(value) ; 
     
     return 
  }
  
  return null 
  
}
return (

    <form>
    
        <input value=\{email} onInput={handleInput} />
        
        {email ? 
        
           <p> Email entered is correct \</p>
           
           : 
           <p> Enter a correct email </p>
           
    <\form>
)

}

`

Handling Events

Event handling when it comes to form is all about validating input and ensuring you get the correct input from users before you submit. You can handle the input while the user is still typing. To handle the input while user is still typing then user the onInput event. To handle the input while an input field loses focus , use the onBlur event. When you submit a form , you can ensure every field is entered correctly before submitting the data to the server by using onSubmit. The onSubmit event should be attached to the parent form element

State Management in React Forms

State Management as it relates to React Forms is centered around managing changing values of form input. Our example uses React HOOK (useState) At Render Time , we set the values of each form input to an empty string. When the input field is blurred , or the value changes ; we manage such changes by reassigning the value to the current value.

Use of Fetch API

The purpose of creating a form is to collect data from users. A form process is not completed until the data is submitted to the server. How do we then submit the data ? We use different available means to submit data to the server . They include :

• AJAX
• Fetch API
• Axios
• etc In our training , we rely on Fetch API for sending data back and forth from the server. #bigjara-react