Cara Memetakan Array Bersarang dalam Komponen Bereaksi

Sebagian besar aplikasi modern menggunakan data eksternal dari aplikasi dan alat lain melalui API. Data ini datang dalam semua jenis skema, dan terserah Anda untuk mendekonstruksinya sampai Anda mendapatkan apa yang ingin Anda gunakan. Di antara skema ini adalah objek data yang berisi array bersarang. Mungkin sulit untuk merender data semacam ini. Artikel ini akan mengajari Anda cara memetakan array bersarang di komponen React.


Menggunakan Fungsi Peta

Fungsi peta mengulang item dari array yang diberikan dan mengembalikan pernyataan atau kode yang ditentukan untuk masing-masing item.

Untuk array datar, fungsi peta bekerja sebagai berikut:

const arr = ['a', 'b', 'c'];
const result1 = arr.map(element => {
return element;
});

Di React, Anda harus membungkus fungsi peta dengan kurung kurawal dan menggunakan fungsi panah untuk mengembalikan elemen simpul untuk setiap iterasi. Item dalam array datar di atas dapat dirender sebagai elemen JSX seperti ini:

const arr = ['a', 'b', 'c']; 
function App () {
return (
<>
{arr.map((item, index) => {
<span key={index}>{a}</span>
})}
</>
)
}

Perhatikan bahwa Anda menetapkan kunci untuk setiap elemen yang dikembalikan oleh fungsi peta. Ini membantu React mengidentifikasi item yang telah diubah atau dihapus. Hal ini penting selama proses rekonsiliasi.

Memetakan Array Bersarang dalam Komponen Bereaksi

Array bersarang mirip dengan array yang berisi array lain. Misalnya, larik resep berikut berisi objek dengan larik.

const recipes = [
{
id: 716429,
title: "Pasta with Garlic, Scallions, Cauliflower & Breadcrumbs",
image: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
dishTypes: [
"lunch",
"main course",
"main dish",
"dinner"
],
recipe: {
}
}

]

Untuk data seperti ini dengan array bersarang, Anda harus menggunakan fungsi peta untuk setiap array.

Dalam contoh ini, Anda akan memetakan array data seperti yang ditunjukkan di bawah ini:

See also  Cara Mengatur Buku Cerita di React

export default function Recipes() {
return (
<div>
{recipes.map((recipe) => {
return <div key={recipe.id}>
<h1>{recipe.title}</h1>
<img src={recipe.image} alt="recipe image" />
{recipe.dishTypes.map((type, index) => {
return <span key={index}>{type}</span>
})}
</div>
})}
</div>
)
}

Komponen Resep akan membuat div elemen yang berisi data resep untuk setiap resep dalam larik resep.

Bekerja Dengan Array di JavaScript

JavaScript menawarkan berbagai macam metode array yang membuat bekerja dengan array lebih sederhana. Artikel ini menunjukkan cara merender data dari larik bersarang menggunakan metode larik peta. Selain peta, ada juga metode untuk membantu Anda mendorong data ke larik, menggabungkan dua larik, atau bahkan mengurutkan larik.