stepbystep

// По готовности страницы, вешаем на форму обработчик onsubmit инлайново:

document.addEventListener('DOMContentLoaded', function() {
	document.querySelector('form#userForm').setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
});

// Функция для отправки формы на чистом JavaScript:

function form_send(form) {
	form.setAttribute('onsubmit', 'event.preventDefault();');
	var url = form.getAttribute('action') + '?nocache=' + new Date().getTime();
	var xhr = new XMLHttpRequest(); xhr.open('POST', url);
	xhr.onreadystatechange = function() {
		if (xhr.readyState === XMLHttpRequest.DONE) {
			form.setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
			if (xhr.status === 200) {
				alert('Форма успешно отправлена, ответ сервера: ' + xhr.responseText);
			}
			else {
				console.log('При отправке формы произошла ошибка, ниже объект с деталями ошибки:');
				console.dir(xhr);
				alert('При отправке формы произошла ошибка, детали смотрите в консоли.');
			}
		}
	}
	xhr.send(new FormData(form));
}

const AppMessageItems = () => {
  const { id } = useParams(); // react-router-dom hook
  const subset = useContext(YourContextName).find(item => item.id === id);

  return (
    <Container>
      <div> Id: {subset.id}</div>
      <div> Text: {subset.text}</div>
      ... 
    </Container>
  );
};