عرض قائمة مع key ثابت

ال map بتحول البيانات لعناصر JSX وال key بتساعد React تميز كل عنصر بين مرات العرض

المثال داخل مشروع React يدعم JSX و Hooks

تطبيق الفكرة

بنستخدم معرف العنصر بدل ترتيبه في المصفوفة

ملف App.jsx

const skills = [{ id: 1, name: "HTML" }, { id: 2, name: "CSS" }];
export default function App() {
  return <ul>{skills.map(skill => <li key={skill.id}>{skill.name}</li>)}</ul>;
}

النتيجة

القائمة بتعرض HTML ثم CSS