Mengubah struktur materi event react berdasarkan guideline

[mnindrazaka]

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

1. Permasalahan

Saat membuat fitur pada web, terkadang kita butuh menjalankan perintah saat sesuatu terjadi pada component kita. Misalnya saat button search ditekan

2. Penjelasan Materi Sebagai Solusi

Untuk menjalankan perintah saat sesuatu terjadi, kita bisa menggunakan event

3. Penjelasan Detail Materi

• Cara membuat event handler di react
  • inline
  • dipisah

4. Contoh Kasus

Menerapkan beberapa event handler pada component search :

• onclick pada tombol search
• onchange pada input

function Search(props) {
  function handleButtonClick() {
    alert("tombol diklik");
  }

  function handleInputChange(event) {
    console.log(event.target.value);
  }

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