# Подробнее о state
В этом разделе мы посмотрим как изменение *state* влияет на компонент и немного "зацепим" *stateless* архитектуру.
## Изменение state вызывает render компонента
Все указано в подзаголовке, предлагаю нам в этом убедиться:
Фрагмент компонента ``:
```javascript
...
render() {
const { author, text, bigText } = this.props.data
const { visible } = this.state
console.log('render', this); // добавили console.log
return (
{author}:
{text}
{
!visible &&
Подробнее
}
{
visible &&
{bigText}
}
)
}
...
```
Очистите консоль, и нажмите подробнее на любой из новостей:
Убедились? Несколько правил:
* **нельзя** вызывать *setState* внутри *render:* "реакт бдит", и если изменилось состояние - начинает перерисовывать компонент - видит что изменилось состояние - начинает перерисовывать компонент...
* render - **дорогостоящая** операция, поэтому внимательно относитесь к тому, где вы вызываете *setState*, и что это за собой влечет. Банальные `console.log` могут вам в этом помочь.
Очевидно, что если перерисовывается родительский компонент, то будут перерисованы и все дочерние компоненты.
В дальнейшем мы изучим разные "стадии жизни" компонента, и убедимся, что во время его "перерисовки" могут выполняться разные дорогостоящие операции и даже ajax-запросы. Пока что, просто убедимся, что вызов *setState* родителя - перерисует дочерние компоненты. Для этого предлагаю создать обработчик *onClick* на фразе "Всего новостей".
Попробуйте сами.
**Задача**: Необходимо добавить компоненту `` свойство состояния - *counter*, в котором будет хранится количество кликов по фразе "всего новостей". То есть обычный автоинкремент. Это свойство нужно выводить после количества новостей в обычном параграфе (``). Будет выглядеть так:
В решении важно использовать `this.setState({counter: ++this.state.counter})`, об этом мы подробнее поговорим после решения, которое представлено ниже в виде подсказок и полностью.
Подсказка **#1**: добавьте свойство state в компонент `` для создания начального состояния.
```javascript
...
state = {
counter: 0
}
...
```
Подсказка **#2**: добавьте обработчик *onClick* с функцией, которая будет увеличивать cчетчик (следовательно, изменять *state*, следовательно, вызывать *this.setState*... ).
**Решение**: Полный код компонента ``
```javascript
class News extends React.Component {
state = {
counter: 0, // добавили свойство counter (счетчик)
}
handleCounter = () => { // добавили новый метод
this.setState({ counter: ++this.state.counter }) // в котором увеличиваем счетчик
}
renderNews = () => {
const { data } = this.props
let newsTemplate = null
if (data.length) {
newsTemplate = data.map(function(item) {
return
})
} else {
newsTemplate = К сожалению новостей нет
}
return newsTemplate
}
render() {
const { data } = this.props
const { counter } = this.state // вытащили counter
return (
{this.renderNews()}
{ /* добавили onClick */
data.length ?
Всего новостей: {data.length} : null
}
Всего кликов: { counter }