Handling Multi-Input Forms in React: A Junior Developer’s Guide

Hey React Devs,

Have you ever found yourself facing the challenge of building a complex form with multiple input fields in React?

Let’s say you’re working on a form with a lot of fields — how would you approach this task?

The usual approach

You may begin by defining the state variables for every input field one by one. To track the input data by the user, you may create handler functions for every state variable.

This is not wrong and you may choose this approach in the initial phase. But as the product grows, this can make the code incredibly unmanageable and verbose.

Is there a better way?

Yes, there is - a single state object 😎

Why?

While working as a freelancer on a project, I recently came across this coding pattern. You can see a humongous number of state variables defined for every input field. For another dev to understand and collaborate on the same code, it becomes difficult to debug and work.

How?

Instead of tracking each field with a dedicated state variable, you can use a single state variable object to manage all fields dynamically. This practice enforces cleaner, more readable code which is easier to navigate and debug.

1. One State for All Fields 1️⃣

Start by defining one state object to store all form data. Each key represents a field name, and its value represents the input.

const [formData, setFormData] = useState({
  name: '',
  email: '',
  phone: '',
});

2. Dynamic Change Handler 💪

A single onChange function updates the relevant field based on its name attribute.

const handleChange = (e) => {
  const { name, value } = e.target;
  setFormData((prev) => ({
    ...prev,
    [name]: value,
  }));
};

3. Set Field Names 📝

Ensure each input has a name attribute corresponding to the state object keys.

<input name="name" value={formData.name} onChange={handleChange} />
<input name="email" value={formData.email} onChange={handleChange} />
<input name="phone" value={formData.phone} onChange={handleChange} />

And that’s it! ✨

That’s the key setup. Now, you can proceed with the form data as per the requirement of your problem statement.

---

More Benefits:

1. Performance: Using a single state object minimizes memory usage as React manages one state object instead of multiple independent states.

2. Reduced Re-renders: React re-renders the component only when the single state object changes, reducing unnecessary renders compared to managing multiple states.

3. Improved Props Management: Passing the entire state object as a single prop to child components simplifies prop drilling and makes the code more maintainable.

When to Choose Which Approach

• Small Forms: Using multiple state variables might still be acceptable for simple forms with just a few fields.

• Large or Dynamic Forms: Always opt for a single-state object to keep the codebase maintainable and scalable.

Lessons for Junior Developers

1. Plan Your State 🤔

Before jumping into code, take a moment to think about how the form state will be structured.

2. Don’t Overcomplicate 🫠

Simplify whenever possible. Dynamic handlers and a single state object aren’t just cleaner; they’re also easier to debug.

3. Learn by Doing 🌱

Start with smaller forms, then scale up to more complex ones. Practice will make this approach second nature.

---

Conclusion

Forms are an essential part of web development. They seem simple at first glance, but once you start dealing with forms that have multiple input fields — say 20 or even 30 — it’s easy for things to spiral out of control. 🤯

But don’t worry. Knowledge and practice will help you in the long run.

The next time you face a form with dozens of fields, remember: less is more.

Happy Learning! 😊

— Anushka