Belajar React Dasar #16: Class dan Dynamic Class

• Menambahkan Class Biasa
• Menambahkan Class Secara Dinamis
• Menggunakan Template Literal
• Menggunakan Library clsx (Opsional)
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Styles di React, mulai dari inline style, file CSS eksternal, CSS Modules, hingga library pihak ketiga.

Pada artikel kali ini, kita akan membahas tentang Class dan Dynamic Class. Materi ini penting karena dalam membuat UI, sering kali kita perlu menambahkan class CSS secara dinamis berdasarkan kondisi atau state di React.

Menambahkan Class Biasa

Di React, kita menggunakan atribut className (bukan class) untuk memberikan class pada elemen.

import "./App.css";

function App() {
  return <h1 className="title">Halo, React!</h1>;
}

export default App;

App.css:

.title {
  color: blue;
  text-align: center;
}

Penjelasan:

• React menggunakan className karena class adalah keyword di JavaScript.
• Kita bisa menulis CSS seperti biasa di file .css.

Menambahkan Class Secara Dinamis

Kita bisa mengubah class berdasarkan kondisi menggunakan ternary operator.

import { useState } from "react";
import "./App.css";

function App() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <h1 className={isActive ? "active" : "inactive"}>Halo, React!</h1>
      <button onClick={() => setIsActive(!isActive)}>
        Toggle Class
      </button>
    </div>
  );
}

export default App;

App.css:

.active {
  color: green;
}

.inactive {
  color: red;
}

Penjelasan:

• Jika isActive bernilai true, maka class active dipakai.
• Jika false, maka class inactive dipakai.
• Tombol akan mengubah state sehingga class berganti.

Menggunakan Template Literal

Jika sebuah elemen membutuhkan lebih dari satu class, kita bisa menggunakan **template litera**l.

function App() {
  const isDark = true;

  return (
    <div className={`box ${isDark ? "dark" : "light"}`}>
      Mode Tampilan
    </div>
  );
}

export default App;

App.css:

.box {
  padding: 10px;
  font-weight: bold;
}

.dark {
  background: black;
  color: white;
}

.light {
  background: white;
  color: black;
}

Penjelasan:

• Class dasar box selalu ada.
• Class tambahan dark atau light ditambahkan sesuai kondisi.

Menggunakan Library clsx (Opsional)

Untuk kondisi class yang lebih kompleks, kita bisa menggunakan library clsx.

npm install clsx

Contoh penggunaannya:

import clsx from "clsx";
import { useState } from "react";
import "./App.css";

function App() {
  const [active, setActive] = useState(false);

  return (
    <div>
      <h1 className={clsx("title", { active: active, inactive: !active })}>
        Halo, React!
      </h1>
      <button onClick={() => setActive(!active)}>Toggle Class</button>
    </div>
  );
}

export default App;

Penjelasan:

• clsx memudahkan pengelolaan class dengan kondisi.
• Kita bisa menuliskan object { active: true, inactive: false } untuk menentukan class yang dipakai.

Kesimpulan

Pada artikel ini, kita sudah belajar tentang Class dan Dynamic Class di React. Kita bisa menambahkan class dengan className, mengubahnya secara dinamis menggunakan ternary operator atau template literal, serta menggunakan library clsx untuk kondisi class yang lebih kompleks.

Sampai di sini, kita sudah menyelesaikan seluruh rangkaian Belajar React Dasar mulai dari pengenalan, JSX, komponen, props, state, event handling, conditional rendering, list & keys, form, useEffect, useRef, memoization, context API, Custom Hooks, Styles, hingga Dynamic Class

.

Dengan memahami materi-materi ini, kita sudah memiliki pondasi yang kuat untuk membangun aplikasi dengan React.

Terima kasih