К сожалению новостей нет
} ``` Подсказка **#2** (по сути решение задачи): компонент `` ```jsx class Article extends React.Component { render() { const { author, text } = this.props.data return ({author}:
{text}
Новости
К сожалению новостей нет
} return newsTemplate } render() { const { data } = this.props return (
{this.renderNews()}
{
data.length ? Всего новостей: {data.length} : null
}
);
}
}
```
Что примечательного в этом коде?
Мы создали метод renderNews (внутри class) с помощью так называемой "жирной стрелочной функции" (запись вида `methodName = () => ...`). При такой записи, внутри функции мы не теряем контекст `this`. То есть, можем обращаться к `this.props`, например.
Почему мы метод `render` не описываем через жирную стрелочную функцию? Потому что, это метод жизненного цикла react-компонента, и туда this "прокидывает" уже сам react.
Далее, так как мы `renderNews` создали в качестве метода, значит внутри компонента, мы должны обращаться к нему как `this.XXX` (где `XXX` - название метода, в нашем случае `renderNews`).
Что же изменилось, спросите вы? Было много кода в render, стало чуть выше. Дело в том, что когда ваши компоненты разрастутся, очень удобно иметь "рендер" хорошо читаемым, то есть таким, в котором все лишнее спрятано.
Посмотрим, что вышло в итоге:
[Исходный код](https://github.com/maxfarseer/react-course-ru-v2/tree/chp5-refactor-part-1) на данный момент.
---
# 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/porefaktorim.md?ask=