التبديل باستخدام الحالة

الحالة لا تقتصر على الأرقام فقط. تُعد حالة boolean المبدل القياسي لإظهار وإخفاء العناصر:

const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen(!isOpen)}>Menu</button>
{isOpen ? <p>I am visible!</p> : null}

خدعتان تعملان معًا:

• setIsOpen(!isOpen): علامة ! تقلب القيمة البولينية (boolean)، بحيث يمكن لزر واحد الفتح والإغلاق معًا
• {condition ? jsx : null}: عرض null يؤدي إلى عدم عرض أي شيء؛ العنصر لا يكون مخفيًا فحسب، بل لا يكون موجودًا بالأساس