Mohammad Shahzeb Alam

Posted on Jul 8

React Dynamic Web Apps & Clean Form States

#react #javascript #webdev

While building Chef Claude, I realized React wasn't just helping me build a UI.

It completely changed the way I handled forms and dynamic data.

In vanilla JavaScript, I was writing a lot of code just to grab a value from a form and update the page.

Then I discovered useState and FormData, and things started to click.

The Problem

Chef Claude lets users enter ingredients and generates a recipe.

Before React, I would've selected the input manually, grabbed its value, and updated the DOM myself.

That works, but it quickly becomes messy as your app grows.

Here's the function I used to handle the form:

import React from "react";

function handleIngredientSubmit(event) {
  event.preventDefault();

  // Read the submitted value
  const formData = new FormData(event.currentTarget);
  const newIngredient = formData.get("ingredient");

  // Add the new ingredient to state
  setIngredients((prevIngredients) => [
    ...prevIngredients,
    newIngredient,
  ]);
}

FormData lets me read the submitted value directly from the form.

I could have used a controlled input with onChange, but for this project I only needed the value after the form was submitted.

Using FormData kept the code much simpler.

What Surprised Me

The thing that surprised me wasn't FormData.

It was how little code I had to write.

I expected to manage every input manually, but instead I could grab the submitted value and update my state.

Another thing that finally clicked for me was conditional rendering.

In Chef Claude, I didn't want to show the Generate Recipe button until the user had entered at least four ingredients.

Instead of writing multiple if...else statements, React let me describe that condition directly in the UI.

Before entering four ingredients

After entering four ingredients

The Generate Recipe button appears automatically because the condition is now true.

What I Learned

Before this project, I was still solving React problems the same way I'd solve them in vanilla JavaScript.

Building Chef Claude helped me understand that React already gives you cleaner ways to handle forms and dynamic UI. You just need to know when to use them.

Small things like useState, FormData, and conditional rendering removed a lot of repetitive code that I would've written in vanilla JavaScript.

Final Thoughts

This project made me stop thinking in vanilla JavaScript and start thinking the React way.

What React feature made things finally click for you?

DEV Community