Di tutorial React sebelum ini, sudah dipelajari tentang cara membuat React Element dan merender React Element. Namun itu baru 1 element saja.
Untuk praktek sebenarnya, kita butuh element HTML "bersarang" atau nested element, maksudnya ada banyak element di dalam element lain. Struktur tabel, form, atau list HTML butuh perpaduan banyak element HTML.
Inilah yang akan dibahas dalam lanjutan tutorial belajar React Duniailkom, yakni bagaimana cara menampilkan dan merender banyak React Element.
Cara Membuat Nested React Element
Pada tutorial tentang Pengertian dan Cara Membuat React Element, kita sudah pelajari bahwa argument ketiga dari method React.createElement() bisa diisi dengan child element. Argument ketiga inilah yang bisa dipakai untuk membuat struktur nested element.
Berikut contoh penggunaannya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Uncover</title>
</head>
<body>
<h1>Belajar React</h1>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin></script>
<script>
const myMenu = React.createElement('ul', {},
[
React.createElement('li', {}, 'Espresso'),
React.createElement('li', {}, 'Cappuccino'),
React.createElement('li', {}, 'Moccacino')
]
);
ReactDOM.render(myMenu, document.getElementById('root'));
</script>
</body>
</html>
Untuk argument ketiga dari React.createElement() di baris 18, saya isi dengan array yang elementnya terdiri dari 3 kali pemanggilan method React.createElement() antara baris 20 – 22. Inilah cara membuat nested element di React.
Dengan kode tersebut, konstanta myMenu akan berisi struktur HTML berikut:
<ul> <li>Espresso</li> <li>Cappuccino</li> <li>Moccacino</li> </ul>
Sebagai tambahan, argument kedua dari setiap method React.createElement() di isi dengan object kosong " {} ". Ini adalah cara lain untuk menandakan kita tidak butuh atribut apa-apa.
Berikut hasil dari kode di atas:
Konstanta myMenu sukses ditampilkan dan berbentuk sebuah unordered list.
React Element Butuh Atribut "key"
Kode sebelumnya sudah berhasil tampil, namun masih ada sedikit masalah. Ketika tab console dibuka, tampil pesan warning berikut:
Yang perlu menjadi perhatian, ini adalah pesan level warning, bukan error. Sebenarnya tidak ada yang salah dari kode program kita, akan tetapi React butuh suatu tambahan optimasi ketika memproses data berulang seperti list.
Tim pengembang react ingin membuat proses manipulasi DOM se-efisien mungkin. Salah satu cara adalah dengan mewajibkan setiap react element memiliki identitas khusus agar mudah membedakan satu element dengan element lain. Untuk tag berulang seperti <li>, React butuh tambahan atribut key.
Inilah maksud dari pesan "Warning: Each child in a list should have a unique "key" prop" di tab console. Pesan warning ini akan sering kita temui jika lupa menambah atribut key saat menampilkan data berulang.
Untungnya, yang diinginkan React cukup mudah dibuat. Cukup tambah atribut key dengan nilai unik ke dalam setiap react element. Nilai atribut key boleh bebas, entah itu angka, huruf, atau kombinasi keduanya selama tidak ada yang berulang.
Berikut salah satu solusi yang bisa digunakan:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Uncover</title>
</head>
<body>
<h1>Belajar React</h1>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin></script>
<script>
const myMenu = React.createElement('ul', {},
[
React.createElement('li', {key:'a'}, 'Espresso'),
React.createElement('li', {key:'b'}, 'Cappuccino'),
React.createElement('li', {key:'c'}, 'Moccacino')
]
);
ReactDOM.render(myMenu, document.getElementById('root'));
</script>
</body>
</html>
Sebagai argument kedua dari method React.createElement(), saya isi dengan atribut key dengan nilai huruf 'a', 'b' dan 'c'. Hasilnya, pesan warning sudah tidak keluar lagi.
Dalam tutorial ini kita sudah pelajari cara membuat nested react element dan menampilkannya ke dalam halaman. Meskipun bisa, tapi ini bukanlah cara yang praktis. Bayangkan jika kita perlu membuat tabel yang terdiri dari banyak element.
Untungnya React menyediakan fitur JSX (JavaScript XML) untuk membuat react element dengan lebih praktis. Akan tetapi kita butuh bantuan library Babel untuk "menterjemahkan" kode JSX menjadi React Element. Inilah materi selanjutnya, yakni Cara Mengakses Library Babel JS.