OBJECT DI STATE REACT

Bagaimana jika kita ingin menyimpan objek dalam state di React? Kita bisa menggunakan useState untuk mengelola state yang berisi objek. Ini sangat berguna ketika kita ingin menyimpan data kompleks seperti informasi pengguna, produk, atau entitas lainnya.

Contoh Menggunakan Objek dalam State

import React, { useState } from 'react';

const App = () => {
  const [user, setUser] = useState({
    name: 'Hilman',
    age: 25,
    email: 'hilman@example.com'
  });

  return (
    <div>
      <h1>Profil Pengguna</h1>
      <p>Nama: {user.name}</p>
      <p>Usia: {user.age}</p>
      <p>Email: {user.email}</p>
    </div>
  );
};

export default App;

Penjelasan

Pada contoh di atas, kita membuat state user yang berisi objek dengan properti name, age, dan email. Kita menggunakan useState untuk menginisialisasi state ini dengan nilai awal berupa objek.

Mengubah Objek dalam State

Untuk mengubah nilai dalam objek state, kita perlu membuat salinan dari objek tersebut dan kemudian memperbarui properti yang diinginkan.

Ini penting karena React tidak akan mendeteksi perubahan jika kita langsung mengubah objek state.

const updateUserAge = () => {
  setUser(prevUser => ({
    ...prevUser, // Salin semua properti sebelumnya
    age: prevUser.age + 1 // Perbarui usia
  }));
};

return (
  <div>
    <h1>Profil Pengguna</h1>
    <p>Nama: {user.name}</p>
    <p>Usia: {user.age}</p>
    <p>Email: {user.email}</p>
    <button onClick={updateUserAge}>Tambah Usia</button>
  </div>
);

Pada contoh ini, kita membuat fungsi updateUserAge yang akan menambah usia pengguna setiap kali tombol diklik. Kita menggunakan spread operator (...prevUser) untuk membuat salinan dari objek state sebelumnya, lalu memperbarui properti age.

Dengan cara ini, kita memastikan bahwa React dapat mendeteksi perubahan pada state dan merender ulang komponen dengan nilai yang baru.