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 (
     

        {items.map((value, index) =>
             


        

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