Почему для обработки массива через map(), компонент должен принимать параметр как объект?

Question

[Dominik09]

Приветствую всех.
Возник дотошный вопрос, ибо хочу понять почему так работает, ибо аксиомы в работе языка учить наизусть такое себе удовольствие.

Есть основной компонент "Main", в котором содержится массив. Его я передаю в компонент "Second", где я данный массив перебираю через map и возвращаю JSX. Передаю массив как обычный пропс.
<Second array={this.state.array} />
Как всем известно, map работает только с массивами. Казалось бы все логично. В функцию компонента принимаю параметр у которого будет тип array.

const Second = (array) => {
    return (...) // чтобы не раздувать вопрос
}

На выходе получаю такую ошибку.
TypeError: array.map is not a function
Причем я проверил какую я переменную получаю, и все верно: тип array.

Решение я знаю. Надо параметр обвести в фигурные скобки.

const Second = ({array}) => {
    return (...)
}

Вопрос такой: почему данный параметр надо обводить в фигурные скобки? Я так предполагаю, здесь работает какой-то новый стандарт языка о котором я не знаю?

Answer 1

[Дмитрий Беляев]

Потому что компонент принимает все пропсы в 1 единственный аргумент - объект props, который уже содержит Ваш массив в поле array
Фигурные скобки - это деструктуризация объекта, то есть Вы извлекаете поле объекта в одноименную переменную, по сути, это

const Second = ({array}) => {
    return (...)
}

аналогично этому:

const Second = (props) => {
    const {array} = props;
    return (...)
}

что в свою очередь можно привести к этому:

const Second = (props) => {
    const array = props.array;
    return (...)
}

но с той лишь разницей, что в оригинальном примере нет отдельной переменной props

Comments

[Dominik09]

Точно! Вылетел из головы этот момент. Благодарю за ответ.

Answer 2

[Владимир]

Плохо документацию читаешь, у функционального компонента входящий параметр - пропсы
https://uk.reactjs.org/docs/components-and-props.html
https://learn.javascript.ru/destructuring
Твоя последняя запись аналогична такой

const Second = (props) => {
   const array = props.array;
    return (...)
}

или такой

const Second = (props) => {
   const {array} = props;
    return (...)
}