تغيير className حسب الحالة

القيمة المرسلة إلى className ممكن تتحدد حسب حالة المكون

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

تطبيق الفكرة

بنضيف active لما الزر يكون مفعل

ملف App.jsx

import { useState } from "react";
export default function App() {
  const [active, setActive] = useState(false);
  return <button className={active ? "active" : ""} onClick={() => setActive(value => !value)}>Toggle</button>;
}

النتيجة

الكلاس active بيتضاف بعد الضغط

ملحوظة

عرف قواعد CSS للكلاس علشان يظهر تأثيره على الشكل