Sebelumnya

Berikutnya

Menggunakan jenis data kompleks sebagai alat peraga

Selesai

Komponen props tidak terbatas pada string, tetapi dapat menggunakan objek JavaScript. Anda dapat menggunakan ini untuk membuat komponen yang lebih kuat.

Skenario

Anda perlu memperbarui RecipeTitle guna menampilkan umpan balik untuk resep. Jika peringkat rata-rata berada pada atau di bawah 3,5, Anda harus menampilkannya dalam warna merah. Jika lebih tinggi dari 3,5, Anda ingin menampilkannya dalam warna hijau. Gunakan operator ternary dan kelas CSS untuk membantu mengelola tampilan.

Membuat CSS

Dengan mengimpor CSS ke masing-masing komponen, Anda dapat menghindari konflik penamaan dan masalah lain yang sering muncul dengan CSS. Di sini, mulailah dengan membuat file .css untuk RecipeTitle.

1. Tambahkan file baru ke folder src bernama RecipeTitle.css

2. Tambahkan CSS berikut ke src/RecipeTitle.css:

   .red {
       color: red;
   }
   .green {
       color: green;
   }
   

Memperbarui RecipeTitle

Sekarang, perbarui RecipeTitle untuk mengimpor CSS dan menampilkan nilai.

1. Buka src/RecipeTitle.jsx

2. Di bagian atas file kode, tambahkan baris kode berikut:

   import './RecipeTitle.css';
   

3. Di bawah baris yang berbunyi <h2>{ props.title }</h2>, tambahkan kode berikut:

   <h3 className={ props.feedback.rating <= 3.5 ? 'red' : 'green' }>
       { props.feedback.rating } from { props.feedback.reviews } reviews
   </h3>
   

Jelajahi kode

Mulai dengan mengimpor file CSS yang Anda buat. Tambahkan elemen h3 baru untuk menampilkan feedback. Gunakan operator ternary untuk mengatur kelas berdasarkan rating.

Seluruh konten ReactTitle.jsx seharusnya berupa:

import './RecipeTitle.css';
import React from 'react';

// TODO: Create RecipeTitle component
function RecipeTitle(props) {
    return (
        <section>
            <h2>{ props.title }</h2>
            <h3 className={ props.feedback.rating <= 3.5 ? 'red' : 'green' }>
                { props.feedback.rating } from { props.feedback.reviews } reviews
            </h3>
        </section>
    )
};

export default RecipeTitle;

Memperbarui komponen Aplikasi untuk meneruskan peringkat

Perbarui RecipeTitle untuk mengatur atribut feedback.

1. Buka src/App.jsx.

2. Ubah elemen RecipeTitle yang ada untuk menambahkan atribut feedback:

   <RecipeTitle title={ recipe.title } feedback={ recipe.feedback } />
   

Lihat hasilnya

Simpan semua file. Browser seharusnya otomatis me-refresh dengan tampilan yang diperbarui.

Lanjutkan