Functional React Component with an argument in curly braces

Question

This is called a “destructuring”. Actually, you’re passing an object as an argument to the function, but the destructuring uses only the named properties of the object.

const destructuring = ({ used }) => console.log(used);
    
const properties = {
  unused: 1,
  used: 2,
};

destructuring(properties); // 2

You can even use it for creating variables.

const properties = {
  name: 'John Doe',
  age: 21,
};

const { name, age } = properties;

console.log(name, age); // John Doe 21

Leave a Comment Cancel reply