Форма для добавления элементов в массив в 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>;
}

Дан массив:

const notes = ['a', 'b', 'c', 'd', 'e'];

Выведите элементы этого массива в виде списка ul. Добавьте инпут для добавления новых пунктов списка. Пусть добавление происходит по потери фокуса в инпуте.

Модифицируйте предыдущую задачу так, чтобы при добавлении новой li текст инпута очищался.