בפרק זה נבנה פקד חיפוש ברשימת פריטים. אנו נראה את השימוש במאפיין key כדי לייחד כל פריט ברשימה.

1. נתחיל בבניית הפקד

אנו נקבל כקלט חיצוני את רשימת הפריטים, כאשר לכל פריט יש שם ומזהה ID ייחודי. הפקד יחזיק בתור State את מילת החיפוש הנוכחית, והערך הראשוני שלה יהיה המחרוזת הריקה (כך שכל הפריטים יתאימו). נשתמש גם במנגנון ReactLink כדי לחסוך את קוד הטיפול בשינוי הטקסט בתיבה, ולחבר את תיבת הטקסט ישירות ל State.

כך ייראה שלד הפקד:

var SearchableList = React.createClass({
  getInitialState: function() {
    return { filter: '' }
  },
  mixins: [React.addons.LinkedStateMixin],
  propTypes: {
    items: React.PropTypes.arrayOf(React.PropTypes.shape({
      name: React.PropTypes.string.isRequired,
      id: React.PropTypes.number.isRequired
    })).isRequired
  },
  renderItems: function(filter) {
  },
  render: function() {
  }
});

שימו לב לשימוש ב PropTypes שמאפשרים לי להגדיר בדיוק מה אקבל, כולל מבנה פנימי של האובייקטים בתוך המערך. העברת קלט לא נכון לפקד תזרוק כעת הודעת שגיאה, כך שנוכל מהר לאתר את הבעייה.
בחרתי להפריד את פונקציית render לשני חלקים כדי לשפר את הקריאות. החלק renderItems מסנן את הפריטים ומחזיר את רשימת ה LI עבור הפריטים המתאימים, והפונקציה החיצונית קוראת ל renderItems בתוך מבנה הפקד. כך נראה הפקד המלא בפעולה:

2. הוספת מפתחות

נקליד d בתיבת החיפוש. מבחינת ריאקט, כאשר מפעילים את הפונקציה render לפני הכנסת טקסט ואחריה שתי רשימות התוצאה נראות מאוד דומות. רשימת הפריטים המלאה נראית כך:

<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
<li>wednesday</li>
<li>thursday</li>
<li>friday</li>
<li>saturday</li>

ואילו רשימת הפריטים המסוננת נראית כך:

<li>sunday</li>
<li>monday</li>
<li>wednesday</li>

הדרך הקצרה ביותר לעבור בין הרשימה הראשונה לשניה היא למחוק את ארבעת האלמנטים האחרונים, ולשנות את הטקסט של האלמנט השלישי מ tuesday ל wednesday. זה אומר שאם יש מידע אחר שנשמר ב DOM עבור הפקד השלישי, המידע הזה יישאר ויעבור מ Tuesday ל Wednesday (למשל חשבו על טקסט בתיבת טקסט, ערך של checkbox או select). 
אנו יכולים לבקש מריאקט לשמור על שלמות כל אחד מה DOM Elements שמוצגים באמצעות הוספת מאפיין key לפקדים. שני פקדים עם ערך key שונה לא יעורבבו. בצורה כזו ריאקט יידע למחוק את השורות המתאימות מהרשימה, מה שיהפוך את המעבר לרשימה המסוננת למהיר יותר ופעמים רבות גם נכון יותר. 
על מנת להוסיף את המאפיין key נשנה את הפונקציה renderItems באופן הבא:

    return items.map(function(item) {
      return <li key={item.id}>{item.name}</li>
    });

כך נראה הפקד המלא כולל מאפיין key: