Ekspresi di JSX

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

Apa Itu Ekspresi di JSX?

JSX (JavaScript XML) memungkinkan kita untuk menyisipkan ekspresi JavaScript langsung ke dalam kode markup dengan menggunakan kurung kurawal {}. Ini memungkinkan kita untuk membuat UI yang lebih dinamis dan interaktif.

Contoh sederhana penggunaan ekspresi di JSX:

const nama = "Budi";
return <h1>Hello, {nama}!</h1>;

Kode di atas akan menghasilkan:

<h1>Hello, Budi!</h1>

Jenis Ekspresi yang Bisa Digunakan di JSX

1. Variabel dan Konstanta

Kita bisa langsung memasukkan nilai dari variabel atau konstanta ke dalam JSX.

const umur = 25;
return <p>Umur saya {umur} tahun.</p>;

2. Operasi Matematika

JSX juga mendukung operasi matematika langsung di dalam {}.

return <p>Hasil dari 10 + 5 adalah {10 + 5}.</p>;

3. Pemanggilan Fungsi

Jika kita punya fungsi yang mengembalikan nilai, kita bisa langsung memanggilnya di JSX.

function getNama() {
  return "Budi";
}
return <h1>Hello, {getNama()}!</h1>;

4. Ternary Operator (If-Else Sederhana)

JSX tidak mendukung if-else secara langsung, tapi kita bisa menggunakan ternary operator.

const isLoggedIn = true;
return <h1>{isLoggedIn ? "Selamat datang!" : "Silakan login."}</h1>;

5. Array dan Metode Array

Kita bisa menampilkan daftar elemen menggunakan array dan metode seperti map().

const buah = ["Apel", "Jeruk", "Mangga"];
return <ul>{buah.map((item, index) => <li key={index}>{item}</li>)}</ul>;

Kode ini akan menghasilkan daftar:

<ul>
  <li>Apel</li>
  <li>Jeruk</li>
  <li>Mangga</li>
</ul>

Apa yang Tidak Bisa Dilakukan di JSX?

• JSX tidak bisa menggunakan pernyataan seperti if, for, atau while langsung di dalam {}.
• JSX hanya menerima ekspresi yang mengembalikan nilai.
• JSX tidak bisa langsung menerima objek sebagai output.

  const user = { name: "Budi" };
  return <p>{user}</p>; //  Ini akan error!
  

  Sebagai solusinya, kita bisa mengakses properti dari objek tersebut.

  return <p>{user.name}</p>; //  Ini benar!
  

Kesimpulan

Ekspresi di JSX membuat kode React lebih fleksibel dan dinamis. Dengan {} kita bisa menyisipkan variabel, operasi matematika, fungsi, ternary operator, hingga metode array untuk menampilkan daftar elemen. Namun, JSX tetap memiliki batasan tertentu, seperti tidak bisa langsung menggunakan pernyataan kontrol seperti if atau for di dalam {}.

Sekarang, sudah siap bereksperimen dengan ekspresi JSX? Coba sendiri dan lihat betapa serunya React!