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,172 +191,170 @@ function App() {
   }, []);
 
   return (
-    <>
-      <div className="payment">
-        <div className="title_wrapper">
-          <div className="title">
-            Рублевый перевод на счета других клиентов или в другие банки,
-            включая налоговые платежи
-          </div>
-          <div className="title">№2 от 03.07.2024</div>
-        </div>
-        <div className="section_wrapper">
-          <div className="section_header">Плательщик</div>
-          <div className="section_line"></div>
-        </div>
-        <div className="payer">
-          <div className="child">Плательщик:</div>
-          <div className="child">{`${payerName} ${clientId}`}</div>
-          <div className="child">Номер счета:</div>
-          <div className="child">
-            <select
-              value={payerAccount}
-              onChange={(e) => setPayerAccount(e.target.value)}
-              onClick={() => setFirstRender(false)}
-            >
-              {payerAccounts.map((item, ind) => (
-                <option key={`cbAccountNumber_${ind}`}>
-                  {item.description
-                    ? `${item.cbAccountNumber}|${item.description}`
-                    : item.cbAccountNumber}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="child">ИНН:</div>
-          <div className="child">{payerINN}</div>
-          <div className="child">Сумма:</div>
-          <div className="child">
-            <span>
-              <input
-                value={amount}
-                onChange={(e) => setAmount(e.target.value)}
-                onBlur={handleBlur}
-              />
-              RUB
-            </span>
-          </div>
-          <div className="child">Телефон или электронный адрес:</div>
-          <div className="child">{payerPhoneEmail}</div>
-          <div className="child"></div>
-          <div className="child"></div>
-          <div className="child">Адрес места жительства:</div>
-          <div className="child">{payerAddress}</div>
-          <div className="child">Комиссии и расходы:</div>
-          <div className="child">
-            <select
-              value={chargesDetails}
-              onChange={(e) => setChargesDetails(e.target.value)}
-              onClick={() => setFirstRender(false)}
-            >
-              <option>BEN</option>
-              <option>OUR</option>
-              <option>SHA</option>
-            </select>
-          </div>
+    <div className="payment">
+      <div className="title_wrapper">
+        <div className="title">
+          Рублевый перевод на счета других клиентов или в другие банки, включая
+          налоговые платежи
         </div>
-        <div className="section_wrapper_1">
-          <div className="section_header">Получатель</div>
-          <div className="section_line"></div>
+        <div className="title">№2 от 03.07.2024</div>
+      </div>
+      <div className="section_wrapper">
+        <div className="section_header">Плательщик</div>
+        <div className="section_line"></div>
+      </div>
+      <div className="payer">
+        <div className="child">Плательщик:</div>
+        <div className="child">{`${payerName} ${clientId}`}</div>
+        <div className="child">Номер счета:</div>
+        <div className="child">
+          <select
+            value={payerAccount}
+            onChange={(e) => setPayerAccount(e.target.value)}
+            onClick={() => setFirstRender(false)}
+          >
+            {payerAccounts.map((item, ind) => (
+              <option key={`cbAccountNumber_${ind}`}>
+                {item.description
+                  ? `${item.cbAccountNumber}|${item.description}`
+                  : item.cbAccountNumber}
+              </option>
+            ))}
+          </select>
         </div>
-        <div className="receiver_1">
-          <div className="child"></div>
-          <div className="child"></div>
-          <div className="child">БИК:</div>
-          <div className="child">
+        <div className="child">ИНН:</div>
+        <div className="child">{payerINN}</div>
+        <div className="child">Сумма:</div>
+        <div className="child">
+          <span>
             <input
-              value={bnfBankBic}
-              onChange={(e) => setBNFBankBic(e.target.value)}
+              value={amount}
+              onChange={(e) => setAmount(e.target.value)}
               onBlur={handleBlur}
-              style={{ maxWidth: '32ch' }}
             />
-          </div>
-          <div className="child">№ Корр. счета:</div>
-          <div className="child">
-            <select style={{ maxWidth: '34ch' }}>
-              <option>Выберите значение...</option>
-            </select>
-          </div>
-          <div className="child">Номер счета:</div>
-          <div className="child">
-            <input
-              value={bnfAccount}
-              onChange={(e) => setBNFAccount(e.target.value)}
-              onBlur={handleBlur}
-              style={{ maxWidth: '32ch' }}
-            />
-          </div>
-          <div className="child">ИНН:</div>
-          <div className="child">
-            <input
-              value={bnfINN}
-              onChange={(e) => setBNFINN(e.target.value)}
-              onBlur={handleBlur}
-              style={{ maxWidth: '32ch' }}
-            />
-          </div>
-          <div className="child">КПП (103):</div>
-          <div className="child">
-            <input
-              value={bnfKPP}
-              onChange={(e) => setBNFKPP(e.target.value)}
-              onBlur={handleBlur}
-              style={{ maxWidth: '32ch' }}
-            />
-          </div>
+            RUB
+          </span>
         </div>
-        <div className="receiver_2">
-          <div className="child">Наименование:</div>
-          <div className="child">
-            <input
-              value={bnfName}
-              onChange={(e) => setBNFName(e.target.value)}
-              onBlur={handleBlur}
-              style={{ width: '100ch' }}
-            />
-          </div>
-          <div className="child">Банк получателя:</div>
-          <div className="child">{bnfBankName}</div>
-          <div className="child">Назначение платежа:</div>
-          <div className="child">
-            <textarea
-              value={paymentDetails}
-              onChange={(e) => setPaymentDetails(e.target.value)}
-              onBlur={handleBlur}
-              style={{
-                height: '60px',
-                width: '133ch',
-              }}
-            />
-          </div>
-          <div className="child">Код вида дохода:</div>
-          <div className="child">
-            <select
-              style={{ width: '102ch' }}
-              value={codePurpose}
-              onChange={(e) => setCodePurpose(e.target.value)}
-              onClick={() => setFirstRender(false)}
-            >
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
-          </div>
-          <div className="child">Код (УИП) (22):</div>
-          <div className="child">
-            <input
-              value={taxUINCode}
-              onChange={(e) => setTaxUINCode(e.target.value)}
-              onBlur={handleBlur}
-              style={{ maxWidth: '32ch' }}
-            />
-          </div>
+        <div className="child">Телефон или электронный адрес:</div>
+        <div className="child">{payerPhoneEmail}</div>
+        <div className="child"></div>
+        <div className="child"></div>
+        <div className="child">Адрес места жительства:</div>
+        <div className="child">{payerAddress}</div>
+        <div className="child">Комиссии и расходы:</div>
+        <div className="child">
+          <select
+            value={chargesDetails}
+            onChange={(e) => setChargesDetails(e.target.value)}
+            onClick={() => setFirstRender(false)}
+          >
+            <option>BEN</option>
+            <option>OUR</option>
+            <option>SHA</option>
+          </select>
+        </div>
+      </div>
+      <div className="section_wrapper_1">
+        <div className="section_header">Получатель</div>
+        <div className="section_line"></div>
+      </div>
+      <div className="receiver_1">
+        <div className="child"></div>
+        <div className="child"></div>
+        <div className="child">БИК:</div>
+        <div className="child">
+          <input
+            value={bnfBankBic}
+            onChange={(e) => setBNFBankBic(e.target.value)}
+            onBlur={handleBlur}
+            style={{ maxWidth: '32ch' }}
+          />
+        </div>
+        <div className="child">№ Корр. счета:</div>
+        <div className="child">
+          <select style={{ maxWidth: '34ch' }}>
+            <option>Выберите значение...</option>
+          </select>
+        </div>
+        <div className="child">Номер счета:</div>
+        <div className="child">
+          <input
+            value={bnfAccount}
+            onChange={(e) => setBNFAccount(e.target.value)}
+            onBlur={handleBlur}
+            style={{ maxWidth: '32ch' }}
+          />
+        </div>
+        <div className="child">ИНН:</div>
+        <div className="child">
+          <input
+            value={bnfINN}
+            onChange={(e) => setBNFINN(e.target.value)}
+            onBlur={handleBlur}
+            style={{ maxWidth: '32ch' }}
+          />
+        </div>
+        <div className="child">КПП (103):</div>
+        <div className="child">
+          <input
+            value={bnfKPP}
+            onChange={(e) => setBNFKPP(e.target.value)}
+            onBlur={handleBlur}
+            style={{ maxWidth: '32ch' }}
+          />
+        </div>
+      </div>
+      <div className="receiver_2">
+        <div className="child">Наименование:</div>
+        <div className="child">
+          <input
+            value={bnfName}
+            onChange={(e) => setBNFName(e.target.value)}
+            onBlur={handleBlur}
+            style={{ width: '100ch' }}
+          />
+        </div>
+        <div className="child">Банк получателя:</div>
+        <div className="child">{bnfBankName}</div>
+        <div className="child">Назначение платежа:</div>
+        <div className="child">
+          <textarea
+            value={paymentDetails}
+            onChange={(e) => setPaymentDetails(e.target.value)}
+            onBlur={handleBlur}
+            style={{
+              height: '60px',
+              width: '133ch',
+            }}
+          />
+        </div>
+        <div className="child">Код вида дохода:</div>
+        <div className="child">
+          <select
+            style={{ width: '102ch' }}
+            value={codePurpose}
+            onChange={(e) => setCodePurpose(e.target.value)}
+            onClick={() => setFirstRender(false)}
+          >
+            <option>1</option>
+            <option>2</option>
+            <option>3</option>
+            <option>4</option>
+            <option>5</option>
+          </select>
+        </div>
+        <div className="child">Код (УИП) (22):</div>
+        <div className="child">
+          <input
+            value={taxUINCode}
+            onChange={(e) => setTaxUINCode(e.target.value)}
+            onBlur={handleBlur}
+            style={{ maxWidth: '32ch' }}
+          />
         </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 />);