React Academy · पाठ

useFieldArray से डायनेमिक फ़ील्ड

useFieldArray हुक का उपयोग करके डायनेमिक फ़ॉर्म फ़ील्ड जोड़ें, हटाएँ और उनका क्रम बदलें।

पाठ 4, कुल 4 में से13 चरण

useFieldArray से डायनेमिक फ़ील्ड, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्वागत है

इस पाठ में आप React Hook Form के useFieldArray हुक का उपयोग करके गतिशील फ़ील्ड सूचियों वाले फ़ॉर्म बनाएँगे—जैसे आइटम जोड़ना, हटाना और उनका क्रम बदलना।

useFieldArray क्या है

useFieldArray, React Hook Form के भीतर फ़ील्डों की एक सरणी का प्रबंधन करता है। यह फ़ील्ड सूची में बदलाव करने के लिए जोड़ने, आगे जोड़ने, हटाने, अदला-बदली करने, स्थानांतरित करने और सम्मिलित करने की विधियाँ प्रदान करता है।
import { useFieldArray } from 'react-hook-form';

const { fields, append, remove } = useFieldArray({
  control,
  name: 'phoneNumbers',
});

सेटअप: useForm से नियंत्रण

useFieldArray को useForm से प्राप्त `control` ऑब्जेक्ट की आवश्यकता होती है। इसे register और handleSubmit के साथ डीस्ट्रक्चर करें।
const { register, control, handleSubmit } = useForm({
  defaultValues: { phoneNumbers: [{ value: '' }] },
});

फ़ील्ड प्रदर्शित करना

प्रत्येक आइटम को प्रदर्शित करने के लिए `fields` पर मैप करें। React कुंजी के रूप में फ़ील्ड की `id` का उपयोग करें, इंडेक्स का नहीं। ऐरे पथ सिंटैक्स का उपयोग करके प्रत्येक फ़ील्ड को पंजीकृत करें।
return fields.map((field, index) => (
  <div key={field.id}>
    <input
      {...register(`phoneNumbers.${index}.value`)}
    />
    <button onClick={() => remove(index)}>Remove</button>
  </div>
));

नए फ़ील्ड जोड़ना

सूची के अंत में नया फ़ील्ड जोड़ने के लिए डिफ़ॉल्ट मान वाली ऑब्जेक्ट के साथ जोड़ने वाली विधि को कॉल करें। फ़ॉर्म उसे अपने-आप पंजीकृत कर देता है।
<button onClick={() => append({ value: '' })}>
  Add Phone Number
</button>

फ़ील्ड हटाना

किसी विशिष्ट स्थान पर मौजूद फ़ील्ड को हटाने के लिए हटाने वाली विधि को इंडेक्स के साथ कॉल करें। इसके बाद के सभी फ़ील्ड नीचे खिसक जाते हैं और उनका पंजीकरण अपने-आप अपडेट हो जाता है।
<button onClick={() => remove(index)}>Delete</button>

न्यूनतम फ़ील्ड सत्यापन

कम-से-कम एक फ़ील्ड मौजूद है, यह सुनिश्चित करने के लिए Zod schema में .min() के साथ सरणी की लंबाई का सत्यापन कर सकते हैं।
const schema = z.object({
  emails: z.array(z.object({ value: z.string().email() }))
           .min(1, 'At least one email required'),
});

फ़ील्डों की अदला-बदली और स्थानांतरण

दो फ़ील्डों की जगह बदलने के लिए `swap(indexA, indexB)` या किसी फ़ील्ड को नए स्थान पर रखने के लिए `move(from, to)` का उपयोग करें। इनका उपयोग खींचकर छोड़ने योग्य क्रमबद्ध फ़ील्ड सूचियाँ बनाने में किया जाता है।
swap(0, 2); // swap first and third items
move(3, 0); // move item at index 3 to the top

नेस्टेड useFieldArray

बहु-स्तरीय गतिशील फ़ॉर्म के लिए एक useFieldArray के भीतर दूसरा useFieldArray रख सकते हैं, जैसे पंक्ति आइटम वाले चालान में, जहाँ प्रत्येक आइटम के अपने उप-आइटम हों।

सरणी डेटा सबमिट करना

सबमिट करने पर handleSubmit पूरी सरणी को data ऑब्जेक्ट के एक भाग के रूप में पास करता है। इसे data.phoneNumbers पर प्राप्त करें—यह फ़ील्ड संरचना से मेल खाने वाली ऑब्जेक्टों की एक सरणी है।
const onSubmit = (data) => {
  console.log(data.phoneNumbers);
  // [{ value: '555-1234' }, { value: '555-5678' }]
};

त्वरित जाँच

useFieldArray के फ़ील्ड प्रदर्शित करते समय React कुंजी के रूप में सरणी इंडेक्स के बजाय field.id का उपयोग क्यों करना चाहिए?

पुनरावलोकन

useFieldArray आपको fields सरणी और जोड़ने, हटाने, अदला-बदली करने तथा स्थानांतरित करने की विधियाँ देता है। React कुंजी के रूप में field.id का उपयोग करें, 'fieldName.index.subfield' सिंटैक्स के साथ पंजीकरण करें और Zod min/max से सरणियों का सत्यापन करें।

पाठ्यक्रम पूरा हुआ

बधाई हो! आपने **React Hook Form के साथ फ़ॉर्म प्रबंधन** पूरा कर लिया है। अब आप RHF से बेहतर प्रदर्शन वाले फ़ॉर्म बना सकते हैं, Zod schema सत्यापन लागू कर सकते हैं और गतिशील फ़ील्ड सरणियाँ बना सकते हैं।
शुरुआत निःशुल्क

एआई शिक्षक के साथ React सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
88
पाठ
324

अक्सर पूछे जाने वाले प्रश्न

क्या “useFieldArray से डायनेमिक फ़ील्ड” पाठ निःशुल्क है?

हाँ—“useFieldArray से डायनेमिक फ़ील्ड” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“useFieldArray से डायनेमिक फ़ील्ड” में मैं क्या सीखूँगा?

useFieldArray हुक का उपयोग करके डायनेमिक फ़ॉर्म फ़ील्ड जोड़ें, हटाएँ और उनका क्रम बदलें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“useFieldArray से डायनेमिक फ़ील्ड” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. React Hook Form के साथ शुरुआत
  2. मान्यकरण नियम और त्रुटि संदेश
  3. Zod से स्कीमा मान्यकरण
  4. useFieldArray से डायनेमिक फ़ील्ड
← React Academy पर वापस जाएँ