useFieldArray से डायनेमिक फ़ील्ड
useFieldArray हुक का उपयोग करके डायनेमिक फ़ॉर्म फ़ील्ड जोड़ें, हटाएँ और उनका क्रम बदलें।
useFieldArray से डायनेमिक फ़ील्ड, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
स्वागत है
useFieldArray क्या है
import { useFieldArray } from 'react-hook-form';
const { fields, append, remove } = useFieldArray({
control,
name: 'phoneNumbers',
});सेटअप: useForm से नियंत्रण
const { register, control, handleSubmit } = useForm({
defaultValues: { phoneNumbers: [{ value: '' }] },
});फ़ील्ड प्रदर्शित करना
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>न्यूनतम फ़ील्ड सत्यापन
const schema = z.object({
emails: z.array(z.object({ value: z.string().email() }))
.min(1, 'At least one email required'),
});फ़ील्डों की अदला-बदली और स्थानांतरण
swap(0, 2); // swap first and third items
move(3, 0); // move item at index 3 to the topनेस्टेड useFieldArray
सरणी डेटा सबमिट करना
const onSubmit = (data) => {
console.log(data.phoneNumbers);
// [{ value: '555-1234' }, { value: '555-5678' }]
};त्वरित जाँच
पुनरावलोकन
पाठ्यक्रम पूरा हुआ
एआई शिक्षक के साथ 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 पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- React Hook Form के साथ शुरुआत
- मान्यकरण नियम और त्रुटि संदेश
- Zod से स्कीमा मान्यकरण
- useFieldArray से डायनेमिक फ़ील्ड