Populate Antd Input value depending on selected option - reactjs

Question

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

Answer 1

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>
);
};

Answer 2

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'));