About Lesson
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>