React Forms:

In React functional components, we use the useState hook to manage form input and note storage. Below is an example of handling forms in a notes application using functional components.

Example:

import React, { useState } from "react";
JavaScript
function NotesApp() {
  const [note, setNote] = useState(""); // State for input field
  const [notes, setNotes] = useState([]); // State for storing notes

  const handleChange = (event) => {
    setNote(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (note.trim() !== "") {
      setNotes([...notes, note]); // Add new note to list
      setNote(""); // Clear input field
    }
  };

  return (
    <div>
      <h2>Notes App</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={note}
          onChange={handleChange}
          placeholder="Enter a note"
        />
        <button type="submit">Add Note</button>
      </form>
      
      <h3>My Notes</h3>
      <ul>
        {notes.map((note, index) => (
          <li key={index}>{note}</li>
        ))}
      </ul>
    </div>
  );
}
export default NotesApp;

Handling Multiple Input Fields:

JavaScript
const [formData, setFormData] = useState({ title: "", content: "" });<br><br>const handleChange = (event) => {<br>  setFormData({ ...formData, [event.target.name]: event.target.value });<br>};<br>
PreviousNext