Spread operator and (…form) of explain

by

React mein jab hum ... (three dots) ko kisi Form ke context mein use karte hain, toh iska matlab hota hai Spread Operator. Ye JavaScript ka ek feature hai jo React forms ko handle karna bohot aasaan bana deta hai.

Jab aapke form mein bohot saare inputs hote hain (jaise: Name, Email, Password, Address), toh har ek ke liye alag-alag useState banana mushkil hota hai. Wahan hum ... ka use karte hain.

1. Spread Operator (...) Kaam Kya Karta Hai?

Ye operator kisi purane Object ki saari values ko “faila” (spread) deta hai aur usmein nayi value add karne mein help karta hai bina purani values ko delete kiye.

2. Form Mein Iska Use Kyun Karte Hain?

Maan lijiye aap ek Ecommerce Signup form bana rahe hain.

Bina ... ke (Mushkil Tarika):

Aapko har input ke liye alag state chahiye hogi:

const [name, setName] = useState("")

const [email, setEmail] = useState("")

…aur aise hi 10 aur.

... ke saath (Smart Tarika):

Aap ek hi Object mein saara data rakh sakte hain:

JavaScript

const [formData, setFormData] = useState({
  username: "",
  email: "",
  password: ""
});

3. JSX Mein Form Handling Ka Code

Jab user kuch type karta hai, toh hum ...formData ka use karke purana data save rakhte hain aur sirf wahi field update karte hain jo user badal raha hai.

JavaScript

import { useState } from 'react';

function SignupForm() {
  const [formData, setFormData] = useState({
    username: "",
    email: "",
    password: ""
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    
    // Yahan aata hai '...' ka magic
    setFormData({
      ...formData,       // 1. Purana saara data copy karo
      [name]: value      // 2. Sirf badli hui field ko update karo
    });
  };

  return (
    <form>
      <input 
        name="username" 
        placeholder="Name" 
        onChange={handleChange} 
      />
      <input 
        name="email" 
        placeholder="Email" 
        onChange={handleChange} 
      />
      <button onClick={() => console.log(formData)}>Submit</button>
    </form>
  );
}

4. ...formData Likna Kyun Zaroori Hai?

Agar aap sirf setFormData({ username: value }) likhenge, toh React baaki saari fields (email, password) ko delete kar dega.

  • ...formData ka matlab hai: “Bhai, jo pehle se likha hai use rehne do, bas ye naya wala update kar do.”

Comparison Table

FeatureBina Spread Operator (…)Spread Operator ke saath
State ManagementHar input ke liye alag useState.Sab ke liye ek hi useState object.
Code LengthBohot lamba aur repetitive code.Clean aur chhota code.
ScalabilityNaya input add karna mushkil hai.Bas object mein ek nayi key add karni hai.

Leave a Comment