Mengubah struktur materi state react berdasarkan guideline

[mnindrazaka]

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

1. Permasalahan

Setiap component pasti memiliki sebuah data yang nilainya dapat berubah dan harus selalu di tracking. Misalnya component search memiliki data value dari input searchnya, yang dapat berubah ketika user melakukan onchange pada input search tersebut, dan kita harus selalu mentracking nilai tersebut untuk digunakan pada pencarian

Ada dua solusi sementara yang dapat kita lakukan :

1. mengakses value dari input search secara langsung menggunakan DOM, namun hal ini akan membuat kita tidak konsisten, dimana goal dari penggunakan react adalah menghindari pengaksesan DOM secara langsung

2. membuat sebuah variable yang nilainya akan selalu diubah setiap kali user melakukan onchange pada input search tadi. Namun pada react, kita tidak dapat melakukannya, karena setelah nilai dari variable tadi berubah, tampilan dari component kita tidak akan di render ulang

2. Penjelasan Materi Sebagai Solusi

State merupakan variable khusus yang apabila nilainya berubah akan membuat tampilan dari component react kita akan ikut diubah atau di render ulang

3. Penjelasan Detail Materi

• Cara membuat state
• Cara menggunakan state
• Hubungan antara state dan component

4. Contoh Kasus

Menerapkan state pada react untuk mentracking nilai dari input search

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>
      <button onClick={handleClear}>x</button>
    </div>
  );
}