Sebelumnya

Berikutnya

Menampilkan data daftar

Selesai

Karena React didasarkan pada JSX, yang merupakan kombinasi dari JavaScript dan XML/HTML, Anda dapat menghasilkan HTML secara dinamis, sepenuhnya terintegrasi dengan JavaScript Anda.

Skenario

Anda ingin menampilkan daftar bahan, termasuk menambahkan line-through untuk item apa pun yang ditandai sebagai disiapkan. Lakukan ini dengan membuat file .css baru untuk gaya, lalu komponen baru untuk daftar bahan Anda.

Membuat gaya baru

1. Buat file baru di src bernama IngredientList.css.

2. Tambahkan kode berikut ke IngredientList.css:

   .prepared {
       text-decoration: line-through;
   }
   
   

Membuat komponen

Karena HTML Anda terintegrasi dengan JavaScript di JSX, Anda mengandalkan JavaScript untuk logika dan perulangan. Untuk menampilkan sekumpulan item yang terkandung dalam array, Anda biasanya menggunakan fungsi map. map dirancang untuk membuat array item baru berdasarkan hasil panggilan fungsi. Jika Anda ingin menampilkan daftar judul dalam daftar berurutan, gunakan sintaks map dan { } yang Anda pelajari sebelumnya.

1. Di dalam src, buat file baru bernama IngredientList.jsx.

2. Tambahkan kode berikut ke file:

   import './IngredientList.css'
   import React from 'react';
   
   function IngredientList(props) {
       // Create the list items using map
       const ingredientListItems = props.ingredients.map((ingredient, index) => {
           return (
               // Return the desired HTML for each ingredient
               <li key={index} className={ ingredient.prepared ? 'prepared' : '' }>
                   { ingredient.name }
               </li>
           );
       });
   
       // return the HTML for the component
       // ingredientListItems will be rendered as li elements
       return (
           <ul>
               { ingredientListItems }
           </ul>
       );
   }
   
   export default IngredientList;
   

Jelajahi kode

Mulailah dengan membuat array string untuk berisi daftar ingredients Anda. Anda ingin setiap bahan ditampilkan sebagai item daftar. Anda menerapkan ini dengan menggunakan map.

Seperti yang disorot sebelumnya, map berperilaku yang mirip dengan pernyataan for each. Ini menjalankan fungsi sekali untuk setiap item dalam array. Anda ingin menampilkan koleksi elemen HTML li, sehingga Anda mengembalikan JSX yang sesuai, dengan {ingredient} di dalam li.

Memperbarui Aplikasi untuk menggunakan IngredientList

Mari kita tampilkan daftar bahan Anda!

1. Buka src/app.jsx.

2. Setelah baris yang berbunyi TODO: Import IngredientList, tambahkan kode berikut:

   // TODO: Import IngredientList
   import IngredientList from './IngredientList'
   

3. Setelah baris yang berbunyi TODO: Add IngredientList component, tambahkan JavaScript berikut:

   {/* TODO: Add IngredientList component */}
   <IngredientList ingredients={recipe.ingredients} />
   

Tampilkan hasil

Simpan semua file. Browser akan secara otomatis memperbarui dan menampilkan pembaruan baru. Perhatikan daftar bahan, dengan dua item terakhir ditampilkan sebagai disiapkan, dengan garis melaluinya.

Lanjutkan