Mengubah struktur materi conditional rendering react berdasarkan guideline

[mnindrazaka]

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Terkadang, kita butuh menampilkan suatu component berdasarkan suatu kondisi tertentu, misalnya pada kasus component search, kita butuh menampilkan tombol clear, hanya ketika ada query yang sudah diketikkan

2. Penjelasan Materi Sebagai Solusi

3. Penjelasan Detail Materi

Menjelaskan beberapa cara untuk melakukan conditional rendering :

• Element variable
• Inline if (menggunakan &&)
• Inline if else (menggunakan conditional operator)
• mencegah component agar tidak dirender

referensi https://reactjs.org/docs/conditional-rendering.html

4. Contoh Kasus

Menerapkan conditional rendering pada component search, dimana kita akan menampilkan tombol clear hanya ketika query sudah diketikkan

export function Search(props) {
  const [query, setQuery] = React.useState("");

  function handleButtonClick() {
    alert(query);
  }

  function handleInputChange(event) {
    setQuery(event.target.value);
  }

  function handleClear() {
    setQuery("");
  }

  return (
    <div>
      <label>{props.label}</label>
      <input
        id="search-input"
        onChange={handleInputChange}
        type="text"
        placeholder={props.placeholder}
        value={query}
      />
      <button onClick={handleButtonClick}>{props.buttonLabel}</button>
      {query.length > 0 && <button onClick={handleClear}>x</button>}
    </div>
  );
}