NUHMAN.com

The FormData object in JavaScript is widely used to handle form submissions — especially when working with files or dynamically built forms. While formData.get() retrieves values, you’ll need formData.set() or formData.append() to change or add values. Here's how to do that in a React component.

🛠️ React Example: Change Values in FormData

jsx

import React from 'react';

const MyForm = () => {
  const handleSubmit = (event) => {
    event.preventDefault();

    // Create a FormData object from the submitted form
    const formData = new FormData(event.target);

    // ✅ Log original values
    console.log('Original Name:', formData.get('name'));
    console.log('Original Email:', formData.get('email'));

    // ✅ Modify form data using `set()`
    formData.set('name', 'Updated Name');
    formData.set('email', 'updated@example.com');

    // ✅ Log updated values
    console.log('Modified Name:', formData.get('name'));
    console.log('Modified Email:', formData.get('email'));

    // Use the updated formData object for API calls, etc.
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" defaultValue="Original Name" required />
      </div>

      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" defaultValue="original@example.com" required />
      </div>

      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

💡 Explanation

✅ formData.set(key, value)

• Replaces the value for the given key if it exists.
• Adds the key if it doesn’t already exist.

✅ formData.append(key, value)

• Adds a new value under the key. Great for fields that support multiple values like file inputs.

📊 Example Output (Console):

yaml

Original Name: Original Name
Original Email: original@example.com
Modified Name: Updated Name
Modified Email: updated@example.com

🔍 Bonus: Check if a Field Exists Before Changing

jsx

if (formData.has('name')) {
  formData.set('name', 'John Doe');
}

📦 Use Cases

• ✅ Preprocess or sanitize user input before sending it
• ✅ Override form values before API submission
• ✅ Dynamically update fields without altering the DOM

🧠 Key Points Recap

FeatureMethodDescriptionGet a valueformData.get()Retrieves value by keySet a valueformData.set()Overwrites or adds a valueAdd a new valueformData.append()Adds value even if key already existsCheck existenceformData.has()Returns true if key exists in FormData