Почему ставится {} с аргументом функции?

Question

[PurgaBot]

const StarRating = function({countStar}) {
  return(createArray(countStar).map((n,i) => <Star key={i}/>))
}

Почему в данном коде между аргумента функции ставится {} в React? С ними({}) все работает и функция .map() прогоняет все как надо, но без только изображает 1 объект, а нужно 5.

Comments

[PurgaBot]

Если что скрипт не мой, и это понятно

[WbICHA]

Потому что деструктуризация.

Answer 1

[Test-style]

Скажу другими словами: в функцию прилетает аргумент, у которого есть свойство countStar. Что бы сразу оперировать тем, что лежит в этом свойстве, делается {} - деструктуризация.

Answer 2

[Frontend developer]

При создании компонента в функцию передается объект props, все jsx-атрибуты компонента собираются в объект props.

Поэтому правильно без скобок будет так:

const StarRating = function(props) {
  return(createArray(props.countStar).map((n,i) => <Star key={i}/>))
}