`. Мы могли бы обернуть ее в любой другой элемент, главное, что нужно **запомнить** - внутри *return* всегда должен возвращаться DOM-узел (то есть, что угодно, обернутое в родительский тэг).
3. Мы использовали у родительского элемента атрибут **key** (`
`). Если объяснить предельно просто: реакту нужна уникальность, чтобы все его механизмы работали корректно. По "ключу" *он* будет понимать с каким именно дочерним узлом вы работаете и какому родителю он принадлежит. По поводу использования индекса в качестве ключа в конце урока есть ценное замечание.
4. Мы использовали в шаблоне, значения переменных + текст, например `
{item.author}:
` могло бы быть представлено в нативном js-коде как `
''+item.author+':'
` (пустая строка + значение переменной + двоеточие)
В результате работы функции map, мы получили новый массив, состоящий из необходимых нам реакт-элементов. Это и есть решение нашей задачи, нам осталось лишь сохранить этот массив в переменной, например `newsTemplate`, и в *render* функции компонента `
` вернуть разметку + "переменную-шаблон".
*js/app.js*
```javascript
...
var News = React.createClass({
render: function() {
var data = this.props.data;
var newsTemplate = data.map(function(item, index) {
return (
{item.author}:
{item.text}
)
})
return (
{newsTemplate}
);
}
});
...
```
Посмотрим что получилось: 
Напоследок, мне не хочется, но придется вновь разрушить магию. Давайте сконсолим, *newsTemplate*. Просто добавьте console.log перед return'ом метода *render* компонента `
`.
*js/app.js*
```javascript
...
var News = React.createClass({
render: function() {
var data = this.props.data;
var newsTemplate = data.map(function(item, index) {
return (
{item.author}:
{item.text}
)
})
console.log(newsTemplate);
return (
{newsTemplate}
);
}
});
...
```
Взглянем в консоль: 
Объект, у объекта свойства... все как обычно в мире javascript.
**Итого**: мы научились отображать свойства компонента.
[Исходный код](https://github.com/maxfarseer/react-ru-tutorial/tree/work_with_props) на текущий момент здесь. Не забудьте удалить console.log.
P.S. Здесь и в продолжении всего курса в коде для отображения массива новостей используется `key = {index}`. Обратите внимание на следующую ветку [комментариев](https://habrahabr.ru/post/279249/#comment_8807873) (спасибо *DeLaVega* и *geakstr*).
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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/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.