I would like to populate an input value depending on the selected name before. For exemple, if I select "FRANCILIENNE CONSEIL" I would like the right IBAN associated to be the value of the input.

I tried several things without success.

Here is a stackblitz of my code : https://stackblitz.com/edit/react-rc3me7

CodePudding user response：

you can create some states to handle both select option & input for starter. Then update them through your handleChangeBeneficiary function.

• in Option, would be ideal if you use a unique variable like beneficiaryId instead of name unless your name here also unique.
• you can see the working code here: https://stackblitz.com/edit/react-rc3me7-gr3fmu

import React, { useState } from 'react'

const Demo = () => {
  const [beneficiary, setbeneficiary] = useState()
  const [iban, setiban] = useState()

  const handleChangeBeneficiary = (value) => {
    console.log(`selected ${value}`);
    setbeneficiary(value)

    // get selected iban
    const selected = beneficiaries?.find(item => item?.beneficiaryId == value)
    setiban(selected?.iban)
  };

  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const beneficiaries = [
    {
      iban: 'FR76167LQSDKJLKSQJ86538089',
      name: 'FRANCILIENNE CONSEIL',
      bic: 'TRZOFR21XXX',
      beneficiaryId: '60c38ddf-63f9-4589-888b-27b7e1a50e53',
    },
    {
      iban: 'FR291001DSKLFJSLKJ8633Z17',
      name: 'MR NAMLA EMAD',
      bic: 'PSSTFRPPCNE',
      beneficiaryId: '60a11891-81ba-4ab2-9b92-ce4f461c2d50',
    },
  ];
  return (
    <Form
      {...layout}
      name="test"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item label="Nom du bénéficiare" name="benef">
        <Select
          // defaultValue=""
          value={beneficiary}
          style={{ width: 300, marginBottom: 20 }}
          onChange={handleChangeBeneficiary}
        >
          {beneficiaries.map((nom) => (
            <Option value={nom.beneficiaryId}> {nom.name} </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item label="IBAN" name="iban">
        <Input 
          // autoComplete="off" 
          style={{ marginBottom: 20 }}
          placeholder={iban} 
        disabled/>
      </Form.Item>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

CodePudding user response：

You can update the value of IBAN as well. Please try the below code.

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, InputNumber, Button, Select } from 'antd';
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
/* eslint-disable no-template-curly-in-string */

const { Option } = Select;

/* eslint-enable no-template-curly-in-string */

const Demo = () => {

  const [iban,setValue] =useState('')
  const handleChangeBeneficiary = (value) => {
    console.log(`selected ${value}`);
    const ben= beneficiaries.filter((b)=>b.name===value)
    setValue(value)
   
  };


  

  const onFinish = (values) => {
    console.log('Success:', values);
  
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const beneficiaries = [
    {
      iban: 'FR76167LQSDKJLKSQJ86538089',
      name: 'FRANCILIENNE CONSEIL',
      bic: 'TRZOFR21XXX',
      beneficiaryId: '60c38ddf-63f9-4589-888b-27b7e1a50e53',
    },
    {
      iban: 'FR291001DSKLFJSLKJ8633Z17',
      name: 'MR NAMLA EMAD',
      bic: 'PSSTFRPPCNE',
      beneficiaryId: '60a11891-81ba-4ab2-9b92-ce4f461c2d50',
    },
  ];
  return (
    <Form
      {...layout}
      name="test"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item label="Nom du bénéficiare" name="benef">
        <Select
          defaultValue=""
          style={{ width: 300, marginBottom: 20 }}
          onChange={handleChangeBeneficiary}
        >
          {beneficiaries.map((nom) => (
            <Option value={nom.name}> {nom.name} </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item label="IBAN">
        <Input autoComplete="off" style={{ marginBottom: 20 }} value={iban}/>
      </Form.Item>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));