Extract some common components from update subscription page

I am making a create subscription page and it will use these components

frontend/components/DisplayErrors.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const ErrorMessageShape = PropTypes.shape({
+  loc: PropTypes.arrayOf(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  ),
+  msg: PropTypes.string.isRequired,
+});
+
+function DisplayErrorMessage({ errors }) {
+  return (
+    <div className="alert alert-danger mb-2" role="alert">
+      Error saving subscription.
+      <ul>
+        {errors.map((error) => (
+          <li key={JSON.stringify(error)}>
+            {error.loc && `${error.loc.join(".")}: `}
+            {error.msg}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+DisplayErrorMessage.propTypes = {
+  errors: PropTypes.arrayOf(ErrorMessageShape).isRequired,
+};
+
+export default DisplayErrorMessage;