The journey of #100DaysOfCode (@Darine_Tleiss)

About the Community The Treehouse
75

100daysofcode - Day67

Hello folks :v:, the 67th from 100 is reaching the end. And our daily dose of fun and knowledge is ready to be shared with this amazing community.

Today we will discuss the React JS form and how to use them in an effective way. :exploding_head:

React vs HTML forms :thinking:

  • In HTML, form data is usually handled by the DOM. In React, form data is usually handled by the components . When the data is handled by the components, all the data is stored in the component state. You can control changes by adding event handlers in the onChange attribute.

Handling forms in React :star_struck:

  • In React, form data is usually handled by the components.
  • You can control changes by adding event handlers in the onChange attribute.
  • We can use the useState Hook to keep track of each inputs value and provide a “single source of truth” for the entire application.
  • Example:
   import { useState } from 'react';
   import ReactDOM from 'react-dom/client';
   
   function MyForm() {
     const [name, setName] = useState("");
   
     return (
       <form>
         <label>Enter your name:
           <input
             type="text" 
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
         </label>
       </form>
     )
   }
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<MyForm />);

Submitting Forms in React :ballot_box_with_check:

  • You can control the submit action by adding an event handler in the onSubmit attribute for the <form>
  • Example:
   import { useState } from 'react';
   import ReactDOM from 'react-dom/client';
   
   function MyForm() {
     const [name, setName] = useState("");
   
     const handleSubmit = (event) => {
       event.preventDefault();
       alert(`The name you entered was: ${name}`)
     }
   
     return (
       <form onSubmit={handleSubmit}>
         <label>Enter your name:
           <input 
             type="text" 
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
         </label>
         <input type="submit" />
       </form>
     )
   }
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<MyForm />);

Multiple Input Fields

  • You can control the values of more than one input field by adding a name attribute to each element.
  • We will initialize our state with an empty object.
  • To access the fields in the event handler use the event.target.name and event.target.value syntax.
  • Example:
     import { useState } from 'react';
     import ReactDOM from 'react-dom/client';
     
     function MyForm() {
       const [inputs, setInputs] = useState({});
     
       const handleChange = (event) => {
         const name = event.target.name;
         const value = event.target.value;
         setInputs(values => ({...values, [name]: value}))
       }
     
       const handleSubmit = (event) => {
         event.preventDefault();
         alert(inputs);
       }
     
       return (
         <form onSubmit={handleSubmit}>
           <label>Enter your name:
           <input 
             type="text" 
             name="username" 
             value={inputs.username || ""} 
             onChange={handleChange}
           />
           </label>
           <label>Enter your age:
             <input 
               type="number" 
               name="age" 
               value={inputs.age || ""} 
               onChange={handleChange}
             />
             </label>
             <input type="submit" />
         </form>
       )
     }
     
     const root = ReactDOM.createRoot(document.getElementById('root'));
     root.render(<MyForm />);
5 Likes