Mari kita lanjutkan materi React.js dengan membahas **Conditional Rendering**, **List Rendering**, dan **Form Handling**. Ini adalah konsep penting yang sering digunakan dalam pengembangan aplikasi React untuk membuat UI yang dinamis dan interaktif.
### 1. **Conditional Rendering**
**Conditional rendering** di React digunakan untuk menampilkan komponen atau elemen tertentu berdasarkan kondisi tertentu. Sama seperti di JavaScript, kita bisa menggunakan statement `if`, `ternary operator`, atau `&&` untuk menentukan apa yang harus dirender.
#### Contoh penggunaan `if-else`:
```jsx
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please log in.</h1>;
}
}
#### Menggunakan ternary operator:
```jsx
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
</div>
);
}
#### Menggunakan operator logika `&&` (render hanya jika kondisi benar):
```jsx
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<div>
{isLoggedIn && <h1>Welcome back!</h1>}
</div>
);
}
Pada contoh di atas, komponen hanya akan menampilkan pesan "Welcome back!" jika `isLoggedIn` bernilai `true`.
### 2. **List Rendering**
**List rendering** digunakan untuk menampilkan daftar elemen atau komponen berdasarkan data yang disediakan dalam bentuk array. Dalam React, kita bisa menggunakan fungsi JavaScript `map()` untuk membuat elemen baru untuk setiap item dalam array.
#### Contoh List Rendering:
Misalkan kita memiliki array nama dan ingin menampilkannya dalam daftar.
```jsx
function NameList() {
const names = ['Alice', 'Bob', 'Charlie'];
return (
<ul>
{names.map((name, index) => (
<li key={index}>{name}</li> // Perhatikan penggunaan atribut `key`
))}
</ul>
);
}
#### Mengapa kita memerlukan `key`?
`key` adalah properti khusus yang diperlukan oleh React untuk mengidentifikasi setiap elemen dalam daftar secara unik. Ini membantu React mengetahui elemen mana yang telah berubah, ditambahkan, atau dihapus, dan meningkatkan efisiensi dalam rendering ulang.
Jika objek yang di-render memiliki ID unik, sebaiknya gunakan ID tersebut sebagai `key`:
```jsx
const items = [
{ id: 1, name: 'Item A' },
{ id: 2, name: 'Item B' },
{ id: 3, name: 'Item C' }
];
function ItemList() {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
#### List Rendering dengan Komponen:
Kita bisa menampilkan komponen dalam daftar, bukan hanya elemen HTML biasa. Misalnya, jika kita memiliki komponen `Person` untuk setiap orang dalam daftar:
```jsx
function Person({ person }) {
return <li>{person.name} - {person.age} tahun</li>;
}
function PersonList() {
const people = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 35 }
];
return (
<ul>
{people.map(person => (
<Person key={person.id} person={person} />
))}
</ul>
);
}
### 3. **Form Handling**
Form dalam React di-handle secara berbeda dibandingkan HTML tradisional. Form di React bersifat **kontrol** penuh, yang berarti nilai dari input form dikendalikan oleh state komponen.
#### Form Controlled Component:
**Controlled components** adalah elemen form yang nilai inputnya dikendalikan oleh state React. Dengan cara ini, kita bisa memantau dan memanipulasi data input di dalam form secara lebih terstruktur.
#### Contoh Form Controlled Component:
```jsx
import React, { useState } from 'react';
function SimpleForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = (event) => {
event.preventDefault(); // Mencegah refresh halaman
console.log(`Name: ${name}, Email: ${email}`);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>
Name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)} // Set state ketika ada perubahan input
/>
</label>
</div>
<div>
<label>
Email:
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)} // Set state ketika ada perubahan input
/>
</label>
</div>
<button type="submit">Submit</button>
</form>
);
}
Pada contoh di atas:
- Nilai input `name` dan `email` dikendalikan oleh state.
- Fungsi `onChange` digunakan untuk memperbarui state ketika pengguna mengetik di input field.
- Fungsi `handleSubmit` menangani submit form dan mencegah refresh halaman menggunakan `event.preventDefault()`.
#### Contoh Form dengan Multiple Inputs:
Kita juga dapat menangani banyak input sekaligus dengan menggunakan satu state.
```jsx
import React, { useState } from 'react';
function MultiInputForm() {
const [formData, setFormData] = useState({
name: '',
email: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prevFormData => ({
...prevFormData,
[name]: value
}));
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>
Name:
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
</label>
</div>
<div>
<label>
Email:
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</label>
</div>
<button type="submit">Submit</button>
</form>
);
}
Pada contoh ini:
- Kita menggunakan satu state object `formData` untuk menyimpan beberapa input.
- Menggunakan `name` dari `e.target` untuk mengupdate nilai yang relevan dalam state.
### Kesimpulan:
- **Conditional Rendering** memungkinkan kita untuk menampilkan komponen atau elemen tertentu berdasarkan kondisi tertentu.
- **List Rendering** memudahkan kita untuk menampilkan daftar item berdasarkan array data menggunakan metode `map()`.
- **Form Handling** di React dikendalikan melalui state, di mana kita bisa memantau dan memanipulasi data input di dalam form secara terstruktur dengan controlled components.