# componentWillReceiveProps

Давайте начнем со старого метода жизненного цикла ([componentWillReceiveProps](https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops)), который будет поддерживаться до React 17й версии. Нам нужно это знать, потому что много (очень много) кода уже написано и вам, наверняка, достанется такой проект.

*src/components/News.js*

```jsx
class News extends React.Component {
  componentWillReceiveProps(nextProps) {
    console.log({ nextProps })
    console.log({ oldProps: this.props })
  }
  ...
}

...

export { News }
```

![fresh news](/files/-LvLnWDIry00XAgyxHVe)

Давайте, мы отвлечемся на секунду и исправим старую ошибку - в компоненте `<Add />` у кнопки, сделайте текст "Добавить новость", вместо "Показать Alert".

Продолжим: CWRP в первом аргументе принимает "будущие props", значит мы можем по ним пробежаться, найти новость с "pubg" фрагментом, если она есть и пометить ее как "СПАМ".

Одно НО, так как мы хотим что-то изменять, значит у нас у компонента появляется состояние! **Обращаю внимание**: данная задача сейчас решается не оптимальным способом, мы просто учимся следующим моментам:

* как сделать state на основе props?
* как изменить состояние, на основе вновь пришедших props?

*src/components/News.js*

```jsx
...
class News extends React.Component {

  state = { // создали состояние
    filteredNews: this.props.data,
  }

  componentWillReceiveProps(nextProps) {
    console.log({ nextProps })
    console.log({ oldProps: this.props })
  }
  renderNews = () => {
    const { filteredNews } = this.state // используем состояние
    let newsTemplate = null

    if (filteredNews.length) { // везде data заменена на filteredNews
      newsTemplate = filteredNews.map(function(item) {
        return <Article key={item.id} data={item} />
      })
    } else {
      newsTemplate = <p>К сожалению новостей нет</p>
    }

    return newsTemplate
  }
  render() {
    const { filteredNews } = this.state // аналогично, используем состояние

    return (
      <div className="news">
        {this.renderNews()}
        {filteredNews.length ? (
          <strong className={'news__count'}>
            Всего новостей: {filteredNews.length}
          </strong>
        ) : null}
      </div>
    )
  }
}
...
```

Изменений немного, просто внимательно пробегитесь по файлу - теперь данные берем из filteredNews, но при этом они нам изначально приходят в props (поэтому propTypes оставили без изменений).

Внутри *CWRP* можно безопасно использовать *setState*, так как это не приведет к дополнительной (лишней) перерисовке.

*src/components/News.js*

```jsx
componentWillReceiveProps(nextProps) {
  let nextFilteredNews = [...nextProps.data]

  nextFilteredNews.forEach((item, index) => {
    if (item.bigText.toLowerCase().indexOf('pubg') !== -1) {
      item.bigText = 'СПАМ'
    }
  })

  this.setState({ filteredNews: nextFilteredNews })
}
```

В данном фрагменте ничего необычного, для тех кто в теме основ (я понимаю, что фраза "знать основы" набила оскомину, но их действительно нужно знать).

В `nextFilteredNews` склонировали весь массив новостей из "будущих" пропс, затем пробежались по нему, в if выяснили, есть ли pubg в введеном в bigText тексте, и если есть, заменили на "СПАМ".

Для тех, у кого есть пробелы:

* [toLowerCase](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) (MDN)
* [indexOf](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf) (MDN)

**Итого**:

* научились создавать *state* на основе *props*;
* научились обновлять *state* на основе новых *props* без лишней перерисовки;

[Исходный код](https://github.com/maxfarseer/react-course-ru-v2/tree/chp16-cwp)


---

# 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/spam-filtr/componentwillreceiveprops.md?ask=<question>
```

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.