اذهب إلى المحتوى
  • 0

الربط بين component في react js

محمود_سعداوي

السؤال

السلام عليكم.

في الكود التالي:

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

شكرا لكم.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

عدل الـ 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 للعنصر الأول فقط.

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...