Implement a basic component to display error messages.

src/Form.jsx

@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import './Form.css';
 
-function App() {
+function Form(props) {
   const [firstRender, setFirstRender] = useState(true);
   const [payerName, setPayerName] = useState('');
   const [payerINN, setPayerINN] = useState('');
@@ -135,13 +135,13 @@ function App() {
     },
   ];
 
-  const handleBlur = () => {
+  const handleBlur = useCallback(() => {
     setFirstRender(false);
     (async () => {
       const data = await requestPMTValidationAsyncAwait(fields, 'validate');
-      console.log(data);
+      props.fillMessages(data);
     })();
-  };
+  }, [fields, props]);
 
   const requestPMTValidationAsyncAwait = async (fields, action) => {
     const response = await fetch('/pmtvalidation/validate/', {
@@ -191,12 +191,11 @@ function App() {
   }, []);
 
   return (
-    <>
     <div className="payment">
       <div className="title_wrapper">
         <div className="title">
-            Рублевый перевод на счета других клиентов или в другие банки,
+          Рублевый перевод на счета других клиентов или в другие банки, включая
-            включая налоговые платежи
+          налоговые платежи
         </div>
         <div className="title">№2 от 03.07.2024</div>
       </div>
@@ -355,8 +354,7 @@ function App() {
         </div>
       </div>
     </div>
-    </>
   );
 }
 
-export default App;
+export default Form;

src/Messages.jsx

@@ -0,0 +1,9 @@
+function Messages(props) {
+  return props.messages
+    .filter((item) => item.status != 'OK')
+    .map((item, ind) => (
+      <div key={`messages_${ind}`}>{JSON.stringify(item)}</div>
+    ));
+}
+
+export default Messages;

src/Payment.css

@@ -0,0 +1,12 @@
+.payment_container {
+    padding: 0px;
+}
+
+.payment_form {
+    float: left;
+}
+
+.payment_messages {
+    float: left;
+    max-width: 25%;
+}

src/Payment.jsx

@@ -0,0 +1,41 @@
+import { useMemo, useState } from 'react';
+import Form from './Form.jsx';
+import Messages from './Messages.jsx';
+import './Payment.css';
+
+function Payment() {
+  const [messages, setMessages] = useState([]);
+
+  const fillMessages = (data) => {
+    setMessages(data);
+  };
+
+  const cachedForm = useMemo(() => <Form fillMessages={fillMessages} />, []);
+
+  return (
+    <>
+      <div className="payment_container">
+        <div
+          className="payment_form"
+          style={{
+            width:
+              messages.fields?.filter((item) => item.status != 'OK')?.length > 0
+                ? '75%'
+                : '100%',
+          }}
+        >
+          {cachedForm}
+        </div>
+        {messages.fields?.length > 0 ? (
+          <div className="payment_messages">
+            <Messages
+              messages={messages.fields?.filter((item) => item.status != 'OK')}
+            />
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+export default Payment;

src/main.jsx

@@ -1,4 +1,4 @@
 import { createRoot } from 'react-dom/client';
-import Form from './Form.jsx';
+import Payment from './Payment.jsx';
 
-createRoot(document.getElementById('root')).render(<Form />);
+createRoot(document.getElementById('root')).render(<Payment />);