Necessary Concepts for Our Form Validation App

In this module, we will cover the essential React concepts that make our Form Validation and Hobby Suggestion app function. These include components, state with hooks, event handling, controlled form inputs, side effects with useEffect, arrays and mapping, and conditional rendering. Understanding these will help you see how the form collects input, processes it, and shows meaningful results.

1) Components

A React component is a reusable piece of UI that returns JSX. In our app, everything is built inside one main component called App.

• This App function handles all the logic, form state, fetching of data, and UI rendering.
• Function components must start with a capital letter (like App).
• We didn’t break the UI into smaller components here, but you could separate the form, suggestions list, and footer if the app grew bigger.

In short, the App component defines what the app looks like (form, heading, suggestions) and how it behaves (validating input, generating hobby matches).

2) State and Hooks

State lets our app “remember” values and update the UI automatically when something changes. We used the useState hook to manage multiple pieces of state.

Examples from the code:

const [formData, setFormData] = useState({ name: "", interests: "" });

const [dataset, setDataset] = useState([]);

const [suggestions, setSuggestions] = useState([]);

• formData stores the inputs typed by the user. It is an object with two fields: name and interests.
• dataset stores the list of hobbies loaded from hobbies.json.
• suggestions stores the final hobby recommendations shown after form submission.

Whenever we call the updater functions (setFormData, setDataset, setSuggestions), React re-renders and the UI updates instantly.

3) Event Handling

Event handlers let us respond to user actions, like typing or clicking a button.

Examples:

1. Handling input typing

<input

type="text"

name="name"

value={formData.name}

onChange={handleChange}

/>

• onChange={handleChange} means whenever the user types, the function handleChange updates the formData state.

1. Handling form submission

<form onSubmit={handleSubmit}>

...

<button type="submit">Suggest Hobbies</button>

</form>

• onSubmit={handleSubmit} ensures that when the form is submitted, our function handleSubmit runs.
• Inside handleSubmit, we prevent the page refresh (e.preventDefault()), process the user’s input, and generate hobby suggestions.

4) Controlled Inputs

In React, form inputs are usually controlled, meaning their values are tied directly to state.

For example:

<input

type="text"

name="interests"

value={formData.interests}

onChange={handleChange}

/>

• value={formData.interests} ensures the input always reflects the state.
• onChange updates that state when the user types.

This makes it easy to validate inputs, reset them, or pass the values to other parts of the app.

5) Side Effects with useEffect

We used the useEffect hook to fetch our dataset of hobbies only once when the app loads.

useEffect(() => {

fetch("/hobbies.json")

.then((res) => res.json())

.then((data) => setDataset(data));

}, []);

• The empty array [] tells React to run this effect only once, when the component mounts.
• This way, our hobby suggestions are ready as soon as the app starts.

Without useEffect, we would need to manually load the file each time, which isn’t efficient.

6) Arrays and Mapping

Arrays and the map() function help us dynamically generate UI.

1. Splitting interests into an array

const interestsArray = formData.interests

.split(",")

.map((i) => i.trim().toLowerCase());

Here we take the user’s comma-separated interests and convert them into a clean array of lowercase strings.

2. Rendering suggestions dynamically

<ul>

{suggestions.map((s, i) => (

<li key={i}>🎯 {s}</li>

))}

</ul>

• map() loops over the suggestions array and creates a <li> for each hobby.
• The key={i} ensures each list item is uniquely identified by React.

This way, the UI adapts automatically depending on how many hobbies are suggested.

7) Conditional Rendering

We only want to show suggestions if they exist. React makes this easy with conditional rendering.

{suggestions.length > 0 && (

<div className="suggestions-container">

<h3>Suggested Hobbies:</h3>

<ul>

{suggestions.map((s, i) => (

<li key={i}>{s}</li>

))}

</ul>

</div>

)}

• suggestions.length > 0 && (...) means the suggestions block will only render if there’s at least one suggestion.
• This prevents an empty box from showing before the user submits the form.