Modal مخصص — تحدي React

أكمل مكون Modal قابل لإعادة الاستخدام: لا يعرض شيئاً إذا كان isOpen خاطئاً، يعرض title و children، يُغلق بـ onClose، ولا يُغلق عند النقر داخله (stopPropagation).

function Modal({ isOpen, onClose, title, children }) {
  // أنشئ Modal
  
  return null;
}

function App() {
  const [showModal, setShowModal] = useState(false);
  
  return (
    <div>
      <button onClick={() => setShowModal(true)}>فتح</button>
      <Modal 
        isOpen={showModal} 
        onClose={() => setShowModal(false)}
        title="عنوان"
      >
        <p>محتوى</p>
      </Modal>
    </div>
  );
}

حل هذا التحدي يرتبط بفتح دورة «مقدمة React» بحسابك.