# Добавить новость
Что такое добавление новости?
1. Это форма, в которую мы вводим необходимые данные.
2. Это "лента новостей", которая отображает наши данные.
У данной задачи есть масса вариантов решения. Мы начнем с канонического варианта: в общем родителе (``) будем хранить state с новостями. В компонент `` будем передавать функцию (так как в props мы можем передавать что угодно), которая будет иметь доступ к state с новостями и которая в свою очередь будет добавлять новость в этот state.
Так как state у `` будет изменяться, все дети (в том числе и новостная лента ``) будут перерисованы, а следовательно - мы увидим добавленную новость.
## Взаимодействие из ребенка с родителем
**Шаг 1**: создадим состояние с новостями в `` (а следовательно, переделаем App из stateless в statefull):
```jsx
class App extends React.Component {
state = {
news: myNews, // в начальное состояние положили значение из переменной
}
render() {
return (
Новости
{/* считали новости из this.state */}
)
}
}
```
Что примечательно, мы изменили источник данных для ``, но компонент работает как ни в чем не бывало. Удобно!
**Шаг 2:** передадим функцию-обработчик в Add
```jsx
class App extends React.Component {
state = {
news: myNews,
}
handleAddNews = () => {
console.log('я вызвана из Add, но имею доступ к this.state у App!', this.state)
}
render() {
return (
Новости
)
}
}
```
**Шаг 3:** вызовем функцию из ``, не забудем про *PropTypes*.
```jsx
class Add extends React.Component {
state = {
name: '',
text: '',
agree: false,
}
onBtnClickHandler = (e) => {
e.preventDefault()
const { name, text } = this.state
// alert(name + '\n' + text)
// вызываем вместо alert
this.props.onAddNews()
}
...
render() {
const { name, text, agree } = this.state
return (
)
}
}
Add.propTypes = {
onAddNews: PropTypes.func.isRequired, // func используется для проверки передачи function
}
```
Проверим:
**Шаг 4:** из `` будем передавать объект с новостью.
```jsx
class Add extends React.Component {
...
onBtnClickHandler = (e) => {
e.preventDefault()
const { name, text } = this.state
// передаем name и text
// big text у нас отсутствует :(
this.props.onAddNews({ name, text })
}
...
}
```
**Шаг 5:** полученный объект будем записывать на первое место в массиве с новостями в ``. Разумеется, массив будем обновлять через *setState*.
```jsx
class App extends React.Component {
...
handleAddNews = (data) => {
// сначала мы формируем массив, на основе
// всего того, что уже было в новостях
// и кладем это все в новый массив +
// новую новость кладем в начало массива
const nextNews = [data, ...this.state.news]
// затем обновляем новый массив новостей в this.state.news
this.setState({ news: nextNews })
}
...
}
```
Проверим?
Окей, перед нами отличный кейс (реальный рабочий случай).
*Во-первых*: мы были почти прилежными учениками и сделали propTypes, для ``. Из ошибки сразу понятно: мы не передаем значение *author* (потому что, мы передаем *name*).
*Во-вторых*: мы все же накосячили, и забыли добавить в propTypes для `` свойство id. Хорошо, что кода мало и ошибка сразу нашлась. Не забывайте про перечисление всех свойств в `propTypes` - это супер шпаргалка.
*В-третьих*: мы из `` не передаем `id` и `bigText`.
Тем не менее, нельзя не отметить, что мы добавили динамики в наше приложение! Новость добавляется, причем счетчик новостей работает (а мы его вообще не трогали). Кто уже празднует - молодец, но кто хочет пофиксить все ошибки и сдать работу на пять - милости прошу в заключительный пункт основного курса.
## Работа над ошибками
Я бы хотел, чтобы все это вы пофиксили сами. Но, чтобы не быть автором, который "оп-па, косяк, давайте-ка я отдам это вам на домашку", я все сделаю и опишу. Просто попробуйте. У вас получится. Практика решает. Обязательно всегда практикуйтесь для закрепления материала.
**Задача**:
* добавить в форму добавления textarea для bigText;
* передавать author;
* передавать id (можно сделать через timestamp (отметку времени в ms): `+new Date()`). Для обучающего примера будет достаточно;
* исправить propTypes в ``
**Решение**:
Полный код того, что находится в ` ` (с комментариями о последних изменениях)
```jsx