Create props to fields mappings for the entire form.

src/Form.jsx

@@ -10,11 +10,40 @@ function App() {
   const [payerBankAccount, setPayerBankAccount] = useState('');
   const [amount, setAmount] = useState('0-00');
   const [payerAccounts, setPayerAccounts] = useState([]);
+  const [payerAccount, setPayerAccount] = useState('');
+  const [chargesDetails, setChargesDetails] = useState('OUR');
+  const [bnfAccount, setBNFAccount] = useState('');
+  const [bnfBankBic, setBNFBankBic] = useState('');
+  const [bnfINN, setBNFINN] = useState('');
+  const [bnfKPP, setBNFKPP] = useState('');
+  const [bnfName, setBNFName] = useState('');
+  const [bnfBankName, setBNFBankName] = useState('');
+  const [paymentDetails, setPaymentDetails] = useState('');
+  const [codePurpose, setCodePurpose] = useState('1');
+  const [taxUINCode, setTaxUINCode] = useState('');
+
+  const fields = [
+    { name: 'payer_name', value: payerName },
+    { name: 'client_id', value: clientId },
+    { name: 'payer_inn', value: payerINN },
+    { name: 'payer_phone_email', value: payerPhoneEmail },
+    { name: 'payer_address', value: payerAddress },
+    { name: 'amount', value: amount },
+    { name: 'payer_account', value: payerAccount },
+    { name: 'details_of_charges', value: chargesDetails },
+    { name: 'bnf_account', value: bnfAccount },
+    { name: 'bnf_bank_bic', value: bnfBankBic },
+    { name: 'bnf_inn', value: bnfINN },
+    { name: 'bnf_kpp', value: bnfKPP },
+    { name: 'bnf_name', value: bnfName },
+    { name: 'bnf_bank_name', value: bnfBankName },
+    { name: 'payment_details', value: paymentDetails },
+    { name: 'code_purpose', value: codePurpose },
+    { name: 'tax_uin_code', value: taxUINCode },
+  ];
 
   const handleBlur = () => {
-    console.log(amount);
-    console.log(payerBankAccount);
-    console.log(payerINN);
+    console.log(fields);
   };
 
   useEffect(() => {
@@ -71,7 +100,8 @@ function App() {
           <div className="child">Номер счета:</div>
           <div className="child">
             <select
-              onChange={(e) => setPayerBankAccount(e.target.value)}
+              value={payerAccount}
+              onChange={(e) => setPayerAccount(e.target.value)}
               onBlur={handleBlur}
             >
               {payerAccounts.map((item, ind) => (
@@ -104,8 +134,13 @@ function App() {
           <div className="child">{payerAddress}</div>
           <div className="child">Комиссии и расходы:</div>
           <div className="child">
-            <select>
+            <select
+              value={chargesDetails}
+              onChange={(e) => setChargesDetails(e.target.value)}
+            >
+              <option>BEN</option>
               <option>OUR</option>
+              <option>SHA</option>
             </select>
           </div>
         </div>
@@ -118,7 +153,12 @@ function App() {
           <div className="child"></div>
           <div className="child">БИК:</div>
           <div className="child">
-            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
+            <input
+              value={bnfBankBic}
+              onChange={(e) => setBNFBankBic(e.target.value)}
+              onBlur={handleBlur}
+              style={{ maxWidth: '32ch' }}
+            />
           </div>
           <div className="child">№ Корр. счета:</div>
           <div className="child">
@@ -128,27 +168,50 @@ function App() {
           </div>
           <div className="child">Номер счета:</div>
           <div className="child">
-            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
+            <input
+              value={bnfAccount}
+              onChange={(e) => setBNFAccount(e.target.value)}
+              onBlur={handleBlur}
+              style={{ maxWidth: '32ch' }}
+            />
           </div>
           <div className="child">ИНН:</div>
           <div className="child">
-            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
+            <input
+              value={bnfINN}
+              onChange={(e) => setBNFINN(e.target.value)}
+              onBlur={handleBlur}
+              style={{ maxWidth: '32ch' }}
+            />
           </div>
           <div className="child">КПП (103):</div>
           <div className="child">
-            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
+            <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 onBlur={handleBlur} style={{ width: '100ch' }} />
+            <input
+              value={bnfName}
+              onChange={(e) => setBNFName(e.target.value)}
+              onBlur={handleBlur}
+              style={{ width: '100ch' }}
+            />
           </div>
           <div className="child">Банк получателя:</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',
@@ -157,13 +220,26 @@ function App() {
           </div>
           <div className="child">Код вида дохода:</div>
           <div className="child">
-            <select style={{ width: '102ch' }}>
-              <option></option>
+            <select
+              style={{ width: '102ch' }}
+              value={codePurpose}
+              onChange={(e) => setCodePurpose(e.target.value)}
+            >
+              <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 onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
+            <input
+              value={taxUINCode}
+              onChange={(e) => setTaxUINCode(e.target.value)}
+              onBlur={handleBlur}
+              style={{ maxWidth: '32ch' }}
+            />
           </div>
         </div>
       </div>