Cleaner Code with Prop Destructuring

Snippet

Cleaner Code with Prop Destructuring

Destructuring allows you to extract properties from the props object directly in the function parameters. This avoids repeating 'props.' throughout your component code.

snippet.js
javascript
export default function UserCard({ title, email }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{email}</p>
    </div>
  );
}

nextjs

Breakdown

({ title, email })

Unpacks specific properties from the first argument (props) into local variables.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Cleaner Code with Prop Destructuring

Related