Seringkali kita perlu membuat beberapa class dengan beberapa kondisi di satu element, di react.js sendiri tidak ada fungsi khusus untuk melakukan ini. Kalian dapat menggunakan 3 cara ini untuk membuat class sesuai dengan kondisi yang dibutuhkan.

1. classnames( ) function

Cara pertama kali dapat menggunakan library classnames. Ini sangat cocok untuk kondisi yang kompleks, seperti kalian memiliki banyak class dengan berbagai kondisinal.

Pertama kita perlu menginstall classnames.

npm install classnames

Contoh penggunaan,

import { useState } from "react";
import classnames from "classnames";

export default function App() {
  // Mendefinisikan state 'error' dan 'criticalError' dengan useState
  const [error] = useState(true); // 'error' diatur ke true

  return (
    <div
      // Menggunakan classnames untuk menentukan kelas CSS berdasarkan kondisi variabel
      className={classnames({
        padded: true, // Menambah kelas 'padded' jika bernilai true
        mainContainer: false, // Tidak menambah kelas 'mainContainer' karena false
        warningError: error, // Menambah kelas 'warning' jika 'error' bernilai true
      })}
    >
      Hello, Asinkron
    </div>
  );
}

2. Ternary Operator

Jika kalian butuh cara yang lebih simple kalian dapat menggunakan Ternary Operator. Operator ternary bagus untuk conditional simple. Ini akan menjadi tidak terbaca jika kondisinya terlalu rumit, atau jika terdapat banyak kondisi.

function App() {
  return (
    <div className={condition ? "large" : "small"}> 
    {/* Jika 'condition' true, maka gunakan class .large */}
      <h1>Hello, Asinkron</h1>
    </div>
  );
}

3. Template Literal

Cara terakhir yang gak kalah mudahnya untuk menangai css class dengan berbagai kondisi, kalian dapat menggunakan template literal. Dengan cara ini kalian hanya perlu mengganti penamaan class menggunakan variable, isi dari variable ini yang perlu kalian beri kondisi.

function App() {
  const condition = true
  let result = "small";
  // Jika 'condition' true, 'result' akan diatur sebagai "large"
  if (condition) {
    result = "big";
  }
  return (
    <div className={`${result} content`}> 
    {/* Menggunakan nilai result sebagai kelas CSS yang diterapkan ke elemen div */}
      <h1>Hello, Asinkron</h1>
    </div>
  );
}