React में रिएक्टिव ऐरे ऑपरेशंस
आइए अब सीखते हैं कि ऐरे के एलिमेंट्स के साथ
रिएक्टिव मैनिपुलेशन कैसे करते हैं।
इसके लिए हम प्रत्येक li
पर एक इवेंट हैंडलर लगाएंगे,
जिसमें हम इस li का नंबर
ऐरे में पैरामीटर के रूप में
पास करेंगे:
function App() {
const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
const result = notes.map((note, index) => {
return <li key={index} onClick={() => doSmth(index)}>
{note}
</li>;
});
return <div>
<ul>
{result}
</ul>
</div>;
}
हमारे फंक्शन के अंदर हम अपने ऐरे एलिमेंट पर कोई भी ऑपरेशन कर सकते हैं:
function App() {
...
function doSmth(index) {
let copy = Object.assign([], notes);
copy[index] += '!'; // एलिमेंट के साथ कुछ करेंगे
setNotes(copy);
}
}
नंबरों वाला एक ऐरे दिया गया है। इसे
ul लिस्ट के रूप में दिखाएं।
किसी भी li पर क्लिक करने पर
उसके नंबर का वर्ग करें।
प्रत्येक li के अंत में एक बटन बनाएं,
जिस पर क्लिक करने पर वह li
लिस्ट से डिलीट हो जाए।
एक इनपुट दिया गया है। किसी भी li पर क्लिक करने पर
ऐसा करें कि उस li का टेक्स्ट
इनपुट में आ जाए।
पिछले टास्क को ऐसे मॉडिफाई करें,
कि इनपुट का फोकस खोने पर बदला हुआ
टेक्स्ट संबंधित li में आ जाए।
एक बटन दी गई है। इस बटन पर क्लिक करने पर
li के ऑर्डर को उल्टा करें।
