`. Мы могли бы обернуть ее в любой другой элемент, главное, **напоминаю** - внутри *return* всегда должен возвращаться DOM-узел (то есть, что угодно, обернутое в родительский тэг или в React.Fragment).
3. Мы использовали у родительского элемента атрибут **key** (`
`). Если объяснить предельно просто: реакту нужна уникальность, чтобы все его механизмы работали корректно. По "ключу" *он* будет понимать с каким именно дочерним узлом вы работаете и какому родителю он принадлежит. Индекс - не идеальный вариант для ключа, мы это исправим далее.
4. Мы использовали в шаблоне, значения переменных + текст, например `
{item.author}:
` которое могло бы быть представлено в нативном js-коде как `
''+item.author+':'
` (пустая строка + значение переменной + двоеточие)
В результате работы функции map, мы получили новый массив, состоящий из необходимых нам реакт-элементов. Это и есть решение нашей задачи, нам осталось лишь сохранить этот массив в переменной, например `newsTemplate`, и в *render* функции компонента `
` вернуть разметку + "переменную-шаблон".
News по-быстрому переделаем в statefull (через class ... extends):
*index.html*
```javascript
...
const myNews = [
{
author: 'Саша Печкин',
text: 'В четверг, четвертого числа...'
},
{
author: 'Просто Вася',
text: 'Считаю, что $ должен стоить 35 рублей!'
},
{
author: 'Max Frontend',
text: 'Прошло 2 года с прошлых учебников, а $ так и не стоит 35'
},
{
author: 'Гость',
text: 'Бесплатно. Без смс, про реакт, заходи - https://maxpfrontend.ru'
}
];
class News extends React.Component {
render() {
const newsTemplate = this.props.data.map(function(item, index) {
return (
{item.author}:
{item.text}
)
})
console.log(newsTemplate)
return (
{newsTemplate}
)
}
}
...
```
Посмотрим что получилось: 
Вы еще не в восторге? Количество кода - кот наплакал.
Напоследок, мне не хочется, но придется вновь разрушить магию. Давайте посмотрим, что возвращает `console.log(newsTemplate)` (откройте вкладку Console).
Взглянем в консоль: 
Объект, у объекта свойства... все как обычно в мире javascript.
## Почему не стоит указывать index в качестве ключа
Если кому интересны причины, то приведу вам комментарий из старого учебника:
> P.S. Здесь и в продолжении всего курса в коде для отображения массива новостей используется `key = {index}`. Обратите внимание на следующую ветку [комментариев](https://habrahabr.ru/post/279249/#comment_8807873) (спасибо *DeLaVega* и *geakstr*).
Суть в том, что index не лучший вариант для ключа, когда ваши "айтемы" могут менять порядок. У нас новости не меняются, но тем не менее, мы можем быстро решить нашу проблему добавив "действительно" уникальное значение, которое не будет изменяться, если у элементов поменяется index.
Конечно же, это свойство называется id ;) Добавим его в массив и будем использовать в качестве ключа.
*index.html*
```jsx
...
const myNews = [
{
id: 1, // добавили id
author: 'Саша Печкин',
text: 'В четверг, четвертого числа...'
},
{
id: 2,
author: 'Просто Вася',
text: 'Считаю, что $ должен стоить 35 рублей!'
},
{
id: 3,
author: 'Max Frontend',
text: 'Прошло 2 года с прошлых учебников, а $ так и не стоит 35'
},
{
id: 4,
author: 'Гость',
text: 'Бесплатно. Без смс, про реакт, заходи - https://maxpfrontend.ru'
}
];
class News extends React.Component {
render() {
const newsTemplate = this.props.data.map(function(item) {
return (
{/* используем id в качестве ключа */}
{item.author}:
{item.text}
)
})
return (
{newsTemplate}
)
}
}
...
```
**Итого**: мы научились отображать свойства компонента.
[Исходный код](https://github.com/maxfarseer/react-course-ru-v2/tree/chp3-passing-props-to-news) на текущий момент. Не забудьте удалить console.log.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://max-frontend.gitbook.io/react-course-ru-v2/ispolzovanie-props.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.