Skip to main content

Memanipulasi data Array Object dengan cara Two Way Binding seperti pada Vue menggunakan React useState.

Two way binding adalah pemrosesan atau pengubahan data dengan dua arah, sedangkan One way binding adalah pemrosesan data dengan satu arah.

Berbeda dengan Vue yang sangat mudah untuk menggunakan Two way binding, hanya dengan v-model, sebaliknya perlu usaha lebih jika diterapkan menggunakan Reactjs yang hanya menggunakan konsep One way binding. Tidak perlu khawatir, two way binding dapat dilakukan pada Reacts menggunakan perantara useState.

misalkan saya mempunyai data object seperti berikut.

const personal = [{
  id: 1,
  name: "Piere Cardon",
  age: 28,
  email: "piere@gmail.com",
  },
  {
  id: 2,
  name: "Muhammad Ali",
  age: 19,
  email: "mali@gmail.com",
  },
  {
  id: 3,
  name: "Vaselin Peer",
  age: 33,
  email: "vaselin@gmail.com",
}],

Setelah itu import dan gunakan useState untuk menduplikasi data personal yang kita punya tersebut.

 const [data, setData] = useState(personal) 

Selanjutnya yang bisa kita lakukan adalah mengekstrak data personal tersebut menggunakan fungsi map() pada javascript.

return (
  <>
  <p>Data Personal</p>
    {data.map((val) => {
      return (
        <div key={val.id}>
          <h2>{val.name}</h2>
          <input type="text" className="text-black p-1 rounded-lg"
          onChange={(e)=>onChangeHandle(e, val.id)}/>
        </div>
      );
    })}
  </>
);

Tambahkan fungsi dan passing data (event dan id), untuk menangkap input ketika di kita isi yang kita tangkap menggunakan onChange.

function onChangeHandle(e, id) {
  const { value } = e.target;
  const updateData = data.map((val) => {
    return val.id === id ? { ...val, name: value } : val;
  });
  //ubah data useState
  setData(updateData);
}

Seperti dijelaskan di awal, menerapkan two way binding tidak segampang menggunakan vue. Pada dasarnya masing-masing library punya kelebihan dan caranya masing-masing.

Artikel ini dibuat untuk mendokumentasi diri sendiri, dan juga semoga bermanfaat untuk orang lain. Terima kasih.

Leave a Reply