What do curly braces around a variable in a function parameter mean

Question

I saw this code on a package:

const SortableList = SortableContainer(({items}) => {
 return (
     <ul>
        {items.map((value, index) =>
            <SortableItem key={`item-${index}`} index={index} value={value} />
        )}
    </ul>
 );
});

What is happening to items by putting curly braces around it in the function parameters?

Answer 1

This is destructuring assignment syntax.

As another example, the following two lines of code are equal:

const { items } = args

const items = args.items

Simply put, it is a simplified way of accessing specific field of a given variable for further use in that scope.

In your original example, it is declaring a variable items for use in the function body that is the items field of that first argument.

const SortableList = SortableContainer(({items}) => {
    // do stuff with items here

is equal to

const SortableList = SortableContainer((input) => {
    const items = input.items
    // do stuff with items here