Форма для добавления элементов в массив в React

Пусть в стейте notes хранится массив и элементы этого массива выводятся в абзацах:

function App() {
const [notes, setNotes] = useState([1, 2, 3, 4, 5]);

const result = notes.map((note, index) => {
return <p key={index}>{note}</p>;
});

return <div>
{result}
</div>;
}
Давайте сделаем инпут и кнопку с помощью которых можно будет реактивно добавлять новые абзацы. Пусть мы будем вводить текст в инпут, жать на кнопку и после этого должен появится новый абзац с введенным нами текстом.

Как вы уже знаете, для этого необходимо добавить новый элемент в стейт с массивом. После этого HTML код автоматически изменится.

Давайте реализуем описанное:

function App() {
const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
const [value, setValue] = useState('');

const result = notes.map((note, index) => {
return <p key={index}>{note}</p>;
});

function addItem() {
setNotes([...notes, value]);
}

function changeInput(event) {
setValue(event.target.value);
}

return <div>
{result}

<input value={value} onChange={changeInput} />
<button onClick={addItem}>add</button>
</div>;
}
Можно переписать в короткой форме:

function App() {
const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
const [value, setValue] = useState('');

const result = notes.map((note, index) => {
return <p key={index}>{note}</p>;
});

return <div>
{result}

<input value={value} onChange={event => setValue(event.target.value)} />
<button onClick={() => setNotes([...notes, value])}>add</button>
</div>;
}