React, Vue and Svelte: Comparing destructuring Props

Destructuring props in...

When it comes to ES6+, Object and JavaScript, you can use the destructuring method and it works the same because it is just ... well, JavaScript!

Check it out 🚀

React

Link

// Parent Component
<ChildComponent {...user} />
// or
<ChildComponent user={user} />

const Component = ({id, name, lastname}) => {
  return <div id={id}>{name}{lastname}</div>
}

Vue

Link

const props = defineProps({
  user: Object
})
let { id, name, lastname } = props.user;
<template>
<div>{{ id }} {{ name }}</div>
</template>

Svelte

Link

// Parent Component
<ChildComponent {...user} />

// Child Component
export let name;
export let lastname;
export let id;

<div>{name} {lastname} {id}</div>