DESCTRUCURING PROPS REACT

Destructuring props di React memungkinkan kita untuk mengambil nilai dari objek props secara langsung, sehingga membuat kode lebih bersih dan mudah dibaca.

Contoh Destructuring Props

Misalnya, kita punya komponen UserProfile yang menerima props name dan age:

// UserProfile.js
function UserProfile({ name, age }) {
  return <h1>Nama: {name}, Umur: {age}</h1>;
}

export default UserProfile;

Kemudian, kita bisa menggunakan komponen ini di file lain seperti App.js:

// App.js
import UserProfile from './UserProfile';  

function App() {
  return (
    <div>
      <UserProfile name="Tiqa" age={25} />
      <UserProfile name="Endy" age={30} />
      <UserProfile name="Hilman" age={28} />
    </div>
  );
}
export default App;

Dengan cara ini, kita langsung mengambil nilai name dan age dari props tanpa perlu menulis props.name atau props.age. Ini membuat kode lebih ringkas dan mudah dipahami.