קורס React 2020 שיעור דוגמא: סימון מרובה ומחיקה ברשימה בריאקט

דיונים מקורסים
#1
זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/react/lessons/913fe4e0-ccdf-4e75-b5a7-269dad648a51
#2

אפשר היה בפונקציה reset רק לשנות את ה-key של ה-SelectableList ולהעביר את הפונקציה reset כ-props.

const App = () => {
  const items = ['one', 'two', 'three', 'four', 'five'];
  const [keyS , setKey] = useState(0);
  
  function reset() {
    setKey(keyS=> !keyS);
  }

  return (
    <div>
      <SelectableList key = {keyS} items={items} reset={reset}/>
    </div>
  )
};
#3

נכון מאוד! אבל זה רק בתנאי שמוותרים על רשימת הפריטים המסומנים. אם רוצים לשמור את המידע לגבי איזה פריטים מסומנים בשדה נוסף בעמוד אז הרשימה הזאת כבר תישמר כ State ותופיע מסומנת מחדש גם עם ה key החדש

לייק 1
#4

היי, עשיתי את התרגיל כמו שעשית אבל משום מה כשאני לוחצת על reset אני לא מקבלת את כל הרשימה מסומנת כמו שקרה לך, ולא הצלחתי להבין מה ההבדל?

function SelectableList(props) {

  const { items } = props;

  const [activeItems, setActiveItems] = useState(items);

  const [selectedItems, setSelectedItems] = useState([]);

  function toggleItem(add, item){

    if(add){

      setSelectedItems([...selectedItems, item]);

    } else {

      setSelectedItems(selectedItems.filter(x => x !== item));

    }

  }

  function deleteSelectedItems(){

    setActiveItems(activeItems.filter(x => !selectedItems.includes(x)));

  }

  function reset(){

    setActiveItems(items);

  }

  return (

    <>

      <button onClick={deleteSelectedItems}>Delete</button>

      <button onClick={reset}>Reset</button>

      <ul>

        {

          activeItems.map((item, index) => (

            <li key={item}>

              <input type='checkbox' onChange={(e) => toggleItem(e.target.checked, item)}/>

              {item}

              </li>

          ))

        }

      </ul>

    </>

  );

}
#5

הי,

ממה שאני זוכר reset לא יחזיר את כל הרשימה להיות מסומנת אלא יבטל את כל המחיקות שעשינו ויחזיר את הרשימה למצב המקורי. איפה ראית שכל הרשימה אצלי מסומנת? באיזה חלק בוידאו?

#6

בדיוק, הם לא אמורות להיות מסומנות אבל כשאתה עשית בסרטון בדקה ה8:23 הם יצאו מסומנות ורק כשהוספת את השורה setSelectedItems([]);
רק אז לא היה לך מסומן, אבל לי זה לא מסומן גם בלי השורה הזו אז אני תוהה מה ההבדל…?

#7

בהגדרת ה Checkbox:

              <input type='checkbox' onChange={(e) => toggleItem(e.target.checked, item)}/>

לא הגדרת עבורה מאפיין value