Conceptual Article

Memahami Cara Render Larik di React

Published on January 5, 2021
authorauthor

joshtronic and christinagorton

Bahasa Indonesia
Memahami Cara Render Larik di React

Pengantar

Artikel ini akan mengajari Anda cara merender larik di React dan praktik terbaik yang digunakan saat merender elemen berbeda di dalam komponen.

Salah satu keuntungan menggunakan bahasa web modern seperti JavaScript adalah Anda dapat mengotomatiskan pembuatan potongan HTML.

Dengan menggunakan sesuatu seperti loop terhadap larik atau objek, berarti Anda hanya perlu menulis HTML per item satu kali. Apa lagi, semua editan berikutnya hanya perlu diterapkan sekali.

Merender Beberapa Elemen Sekaligus

Untuk merender beberapa elemen JSX sekaligus di React, Anda dapat memproses sebuah larik dengan metode .map() dan mengembalikan elemen tunggal.

Di bawah ini, Anda memproses larik reptiles dan mengembalikan elemen li untuk setiap item di larik. Anda dapat menggunakan metode ini bila ingin menampilkan elemen tunggal untuk setiap item di larik:

function ReptileListItems() {
  const reptiles = ["alligator", "snake", "lizard"];

  return reptiles.map((reptile) => <li>{reptile}</li>);
}

Keluarannya akan terlihat seperti ini:

Output
- alligator - snake - lizard

Dalam contoh selanjutnya, Anda akan memeriksa alasan perlunya menambahkan key unik ke daftar elemen yang dirender oleh larik.

Merender Kumpulan Elemen di Dalam Komponen

Dalam contoh ini, Anda memproses larik dan membuat serangkaian komponen item daftar seperti contoh sebelumnya.

Untuk memulai, perbarui kode agar menggunakan komponen <ol> untuk menyimpan item <li>. Komponen <ol> akan membuat daftar item yang telah diurutkan:

function ReptileList() {
  const reptiles = ["alligator", "snake", "lizard"];

  return (
    <ol>
      {reptiles.map((reptile) => (
        <li>{reptile}</li>
      ))}
    </ol>
  );
}

Namun, jika mengamati konsol, Anda akan melihat peringatan bahwa setiap anak di suatu larik atau iterator harus memiliki kunci unik.

Peringatan di konsol

Peringatan tersebut muncul karena saat Anda mencoba merender suatu kumpulan di dalam komponen, Anda harus menambahkan sebuah key.

Dalam React, key unik digunakan untuk menentukan komponen dalam suatu kumpulan yang harus dirender kembali. Menambahkan key unik akan mencegah React dari keharusan merender kembali keseluruhan komponen setiap kali ada pembaruan.

Dalam langkah ini, Anda akan merender beberapa elemen sekaligus dalam komponen dan menambahkan key unik. Perbarui kode untuk menyertakan key di item daftar untuk menyelesaikan peringatan:

function ReptileList() {
  const reptiles = ['alligator', 'snake', 'lizard'];

  return (
    <ol>
      {reptiles.map(reptile => (
        <li key={reptile}>{reptile}</li>
      ))}
    </ol>
  );
}

Karena Anda telah menambahkan key, peringatan tersebut tidak akan ada lagi di konsol.

Dalam contoh selanjutnya, Anda akan melihat cara merender elemen yang berdekatan tanpa mengalami kesalahan sintaks umum.

Merender Elemen yang Berdekatan

Di JSX, untuk merender lebih dari satu elemen dalam suatu komponen, Anda harus menambahkan pembungkus di sekelilingnya.

Dalam contoh ini, Anda pertama-tama akan mengembalikan daftar item tanpa memproses suatu larik:

function ReptileListItems() {
  return (
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  );
}

Ini akan memberi Anda pesan kesalahan keras di konsol:

Kesalahan keras dari React untuk elemen JSX yang Berdekatan

Untuk memperbaiki kesalahan ini, Anda perlu membungkus blok elemen li dalam pembungkus. Untuk daftar yang dapat Anda gunakan membungkus elemen ol atau ul:

function ReptileListItems() {
  return (
  <ol>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  </ol>
  );
}

Elemen <li> yang berdekatan kini dibungkus dalam tag pengurung <ol>, dan Anda tidak akan lagi melihat kesalahan.

Di bagian selanjutnya, Anda akan merender daftar dalam pembungkus menggunakan komponen fragment.

Merender Elemen yang Berdekatan dengan React.fragment

Sebelum React v16.2, Anda dapat membungkus blok komponen dalam elemen <div>. Ini akan menghasilkan aplikasi yang penuh dengan divs, yang seringkali disebut “div soup”.

Untuk memperbaiki masalah ini, React merilis komponen baru yang dikenal sebagai komponen fragment:

Bila perlu merender daftar di dalam tag pengurung tetapi ingin menghindari keharusan menggunakan div, Anda dapat menggunakan React.Fragment sebagai gantinya:

function ReptileListItems() {
  return (
  <React.Fragment>
     <li>alligator</li>
     <li>snake</li>
     <li>lizard</li>
  </React.Fragment>
  );
}

Kode yang dirender hanya akan menyertakan elemen li dan komponen React.Fragment tidak akan muncul dalam kode.

Elemen JSX yang dirender di dalam pembungkus React.Fragment

Juga, perhatikan bahwa dengan React.fragment kita tidak perlu menambahkan kunci.

Anda mungkin merasa bahwa menulis React.fragment lebih membosankan daripada menambahkan <div>. Untungnya, tim React telah mengembangkan sintaks yang lebih pendek untuk mewakili komponen ini. Anda dapat menggunakan <> </> sebagai ganti <React.Fragment></React.Fragment>:

function ReptileListItems() {
  return (
 <>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
 </>
  );
}

Kesimpulan

Dalam artikel ini, Anda telah mendalami berbagai contoh cara merender larik dalam aplikasi React.

Bila merender elemen di dalam komponen lain, Anda harus menggunakan key unik dan membungkus elemen di dalam elemen pembungkus.

Tergantung kasus penggunaan, Anda dapat membuat daftar sederhana yang dibungkus dalam komponen fragment yang tidak membutuhkan kunci.

Untuk mempelajari selengkapnya tentang praktik terbaik di React, ikuti seri lengkap Cara Menulis Kode di React.js di DigitalOcean.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
joshtronic

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel