محمود_سعداوي نشر 19 نوفمبر 2022 أرسل تقرير مشاركة نشر 19 نوفمبر 2022 السلام عليكم. في الكود التالي: import React,{useState} from 'react' import './Notes.css' import Note from './Note' function Notes() { const arr = ["A","B","C","D"] const [count,setCount] = useState(0) const handleAdd = () => { if (count < arr.length) { setCount(count+1) console.log(arr[count]); } } return ( <div className='notes'> { arr.map((el,i)=> ( <Note title={el} key={i} i={i} /> )) } <button className='add-btn' onClick={handleAdd}>+</button> </div> ) } export default Notes كيف يمكنني الربط بين button و Note بحيث عند الضغط على الزر يضاف عنصر جديد من المصفوفة arr. شيفرة Note import React,{} from 'react' function Note({title,i}) { return ( <h2 className='note'> {i}: {title} </h2> ) } export default Note شكرا لكم. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 19 نوفمبر 2022 أرسل تقرير مشاركة نشر 19 نوفمبر 2022 عدل الـ map لتتحقق من الـ count قبل ان تقوم بطباعة العناصر كالتالي : // الكود الخاص بك { arr.map((el,i)=> ( <Note title={el} key={i} i={i} /> )) } // الشكل الصحيح { arr.map((el, i) => { // () لاحظ اننا غيرنا الأقواس كذلك لـ {} وليس // واضفنا الشرط كالتالي if (i < count) return <Note title={el} key={i} i={i} />; }) } حيث سيكون الـ count يساوي الصفر في البداية وسيكون الشرط خاطئاً بالنسبة لكل العناصر التي سيمر عليها في ال map. وعندما تنقر على الزر سيصبح ال count يساوي 1 وبالتالي سيكون الشرط محقق بالنسبة للعنصر الأول في الـ map فقط وبالتالي سيعيد Note للعنصر الأول فقط. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
في الكود التالي:
كيف يمكنني الربط بين button و Note بحيث عند الضغط على الزر يضاف عنصر جديد من المصفوفة arr.
شيفرة Note
شكرا لكم.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.