How to make Form.Item component name as an array?

I have component <Form.Item label="Select Stand" name={["standIds"]}> I want modify component as a standIds array
kapa.ai
kapa.ai133d ago
Hi @mflash.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Ant Design, you can use the name prop of the Form.Item component to specify the name of the field. If you want to handle an array of values, you can use the Form.List component. Here's an example from the refine.dev blog (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design#adding-form-list):
<Form.List name={"skills"}>
{(fields, operator) => {
return (
<>
{fields.map((field, index) => {
return (
<div key={field.key}>
<Form.Item name={field.name} label={`skill - ${index + 1}`} rules={[{ required: true }]}>
<Input placeholder="e.g javascript" />
</Form.Item>
</div>
);
})}
<Form.Item>
<Button type="dashed" block>
Add a skill
</Button>
</Form.Item>
</>
);
}}
</Form.List>
<Form.List name={"skills"}>
{(fields, operator) => {
return (
<>
{fields.map((field, index) => {
return (
<div key={field.key}>
<Form.Item name={field.name} label={`skill - ${index + 1}`} rules={[{ required: true }]}>
<Input placeholder="e.g javascript" />
</Form.Item>
</div>
);
})}
<Form.Item>
<Button type="dashed" block>
Add a skill
</Button>
</Form.Item>
</>
);
}}
</Form.List>
In this example, Form.List is used to handle an array of skills. Each skill is a string, and you can add or remove skills dynamically. If you want to handle an array of standIds, you can replace "skills" with "standIds" and adjust the rest of the code accordingly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai133d ago
<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below
rival-black
rival-black133d ago
I want to use this code <Row> <Col span={12}> <Form.Item label="Select Stand" name={["standIds"]}> <Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" /> </Form.Item> </Col> <Col span={12}> <Form.Item label="Select price" name={["standCosts"]}> <Input /> </Form.Item> </Col> <Col span={12}> <Form.Item label="Select Stand" name={["standIds"]}> <Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" /> </Form.Item> </Col> <Col span={12}> <Form.Item label="Select price" name={["standCosts"]}> <Input /> </Form.Item> </Col> </Row> But when I make changes, changes affected to all same names component. I want modify components name as an array @kapa.ai I want to use this code <Row> <Col span={12}> <Form.Item label="Select Stand" name={["standIds"]}> <Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" /> </Form.Item> </Col> <Col span={12}> <Form.Item label="Select price" name={["standCosts"]}> <Input /> </Form.Item> </Col> <Col span={12}> <Form.Item label="Select Stand" name={["standIds"]}> <Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" /> </Form.Item> </Col> <Col span={12}> <Form.Item label="Select price" name={["standCosts"]}> <Input /> </Form.Item> </Col> </Row> But when I make changes, changes affected to all same names component. I want modify components name as an array
kapa.ai
kapa.ai133d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- In Ant Design, the name prop in Form.Item is used to set the name of the field in the form. If you use the same name for multiple fields, they will all refer to the same value in the form data. If you want each field to have its own value, you need to give each field a unique name. If you want to handle an array of values, you can use the Form.List component. Here's an example:
<Form.List name="stands">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{...restField}
name={[name, 'standId']}
fieldKey={[fieldKey, 'standId']}
rules={[{ required: true, message: 'Missing stand id' }]}
>
<Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" />
</Form.Item>
<Form.Item
{...restField}
name={[name, 'standCost']}
fieldKey={[fieldKey, 'standCost']}
rules={[{ required: true, message: 'Missing stand cost' }]}
>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add field
</Button>
</Form.Item>
</>
)}
</Form.List>
<Form.List name="stands">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{...restField}
name={[name, 'standId']}
fieldKey={[fieldKey, 'standId']}
rules={[{ required: true, message: 'Missing stand id' }]}
>
<Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" />
</Form.Item>
<Form.Item
{...restField}
name={[name, 'standCost']}
fieldKey={[fieldKey, 'standCost']}
rules={[{ required: true, message: 'Missing stand cost' }]}
>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add field
</Button>
</Form.Item>
</>
)}
</Form.List>
In this example, Form.List is used to handle an array of stands. Each stand is an object with standId and standCost properties. You can add or remove stands dynamically. Please note that this is a general example and you might need to adjust it according to your needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai133d ago
<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below
rival-black
rival-black133d ago
@kapa.ai 'fieldKey' is deprecated.
kapa.ai
kapa.ai133d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you're correct. In Ant Design 4.x, fieldKey is deprecated. You should use name instead. Here's the updated example:
<Form.List name="stands">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }) => (
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{...restField}
name={[name, 'standId']}
rules={[{ required: true, message: 'Missing stand id' }]}
>
<Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" />
</Form.Item>
<Form.Item
{...restField}
name={[name, 'standCost']}
rules={[{ required: true, message: 'Missing stand cost' }]}
>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add field
</Button>
</Form.Item>
</>
)}
</Form.List>
<Form.List name="stands">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }) => (
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{...restField}
name={[name, 'standId']}
rules={[{ required: true, message: 'Missing stand id' }]}
>
<Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" />
</Form.Item>
<Form.Item
{...restField}
name={[name, 'standCost']}
rules={[{ required: true, message: 'Missing stand cost' }]}
>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add field
</Button>
</Form.Item>
</>
)}
</Form.List>
In this updated example, fieldKey is removed and name is used instead. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai133d ago
<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below
rival-black
rival-black133d ago
@kapa.ai modify code to user select only uniq values from standId
kapa.ai
kapa.ai133d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To ensure that only unique standId values can be selected, you can filter the options based on the current form values. However, this requires you to manage the state of the selected options outside of the form. Here's an example of how you can do this:
const [selectedStandIds, setSelectedStandIds] = useState([]);

<Form.List name="stands">
{{(fields, {{ add, remove }}) => (
<>
{{fields.map(({{ key, name, ...restField }}) => (
<Space key={{key}} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{{...restField}}
name={{[name, 'standId']}}
rules={{[{{ required: true, message: 'Missing stand id' }}]}}
>
<Select
{{...selectPropsStands}}
allowClear
style={{ width: "100%" }}
placeholder="Please select"
onSelect={(value) => setSelectedStandIds([...selectedStandIds, value])}
onDeselect={(value) => setSelectedStandIds(selectedStandIds.filter(id => id !== value))}
>
{{selectPropsStands.options.filter(option => !selectedStandIds.includes(option.value))}}
</Select>
</Form.Item>
<Form.Item
{{...restField}}
name={{[name, 'standCost']}}
rules={{[{{ required: true, message: 'Missing stand cost' }}]}}
>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={{() => remove(name)}} />
</Space>
))}}
<Form.Item>
<Button type="dashed" onClick={{() => add()}} block icon={{<PlusOutlined />}}>
Add field
</Button>
</Form.Item>
</>
)}}
</Form.List>
const [selectedStandIds, setSelectedStandIds] = useState([]);

<Form.List name="stands">
{{(fields, {{ add, remove }}) => (
<>
{{fields.map(({{ key, name, ...restField }}) => (
<Space key={{key}} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{{...restField}}
name={{[name, 'standId']}}
rules={{[{{ required: true, message: 'Missing stand id' }}]}}
>
<Select
{{...selectPropsStands}}
allowClear
style={{ width: "100%" }}
placeholder="Please select"
onSelect={(value) => setSelectedStandIds([...selectedStandIds, value])}
onDeselect={(value) => setSelectedStandIds(selectedStandIds.filter(id => id !== value))}
>
{{selectPropsStands.options.filter(option => !selectedStandIds.includes(option.value))}}
</Select>
</Form.Item>
<Form.Item
{{...restField}}
name={{[name, 'standCost']}}
rules={{[{{ required: true, message: 'Missing stand cost' }}]}}
>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={{() => remove(name)}} />
</Space>
))}}
<Form.Item>
<Button type="dashed" onClick={{() => add()}} block icon={{<PlusOutlined />}}>
Add field
</Button>
</Form.Item>
</>
)}}
</Form.List>
In this example, selectedStandIds is a state variable that keeps track of the currently selected standId values. The onSelect and onDeselect props of the Select component are used to update this state. The options of the Select component are filtered based on selectedStandIds to ensure that only unique standId values can be selected. Please note that this is a general example and you might need to adjust it according to your needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai133d ago
<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below
rival-black
rival-black133d ago
@kapa.ai give full code
kapa.ai
kapa.ai133d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, here's a full example of a form with a dynamic list of stands, where each stand has a unique standId and a standCost. This example uses Ant Design's Form, Form.List, Form.Item, Select, Input, Button, Space, and MinusCircleOutlined components:
import React, { useState } from 'react';
import { Form, Select, Input, Button, Space, MinusCircleOutlined } from 'antd';

const YourComponent = () => {
const [selectedStandIds, setSelectedStandIds] = useState([]);
const selectPropsStands = {
options: [
// Your options here
],
};
return (
<Form>
<Form.List name="stands">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }) => (
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{...restField}
name={[name, 'standId']}
rules={[{ required: true, message: 'Missing stand id' }]}
>
<Select
{...selectPropsStands}
allowClear
style={{ width: "100%" }}
placeholder="Please select"
onSelect={(value) => setSelectedStandIds([...selectedStandIds, value])}
onDeselect={(value) => setSelectedStandIds(selectedStandIds.filter(id => id !== value))}
>
{selectPropsStands.options.filter(option => !selectedStandIds.includes(option.value))}
</Select>
</Form.Item>
<Form.Item
{...restField}
name={[name, 'standCost']}
rules={[{ required: true, message: 'Missing stand cost' }]}
>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add field
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form>
);
};

export default YourComponent;
import React, { useState } from 'react';
import { Form, Select, Input, Button, Space, MinusCircleOutlined } from 'antd';

const YourComponent = () => {
const [selectedStandIds, setSelectedStandIds] = useState([]);
const selectPropsStands = {
options: [
// Your options here
],
};
return (
<Form>
<Form.List name="stands">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }) => (
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{...restField}
name={[name, 'standId']}
rules={[{ required: true, message: 'Missing stand id' }]}
>
<Select
{...selectPropsStands}
allowClear
style={{ width: "100%" }}
placeholder="Please select"
onSelect={(value) => setSelectedStandIds([...selectedStandIds, value])}
onDeselect={(value) => setSelectedStandIds(selectedStandIds.filter(id => id !== value))}
>
{selectPropsStands.options.filter(option => !selectedStandIds.includes(option.value))}
</Select>
</Form.Item>
<Form.Item
{...restField}
name={[name, 'standCost']}
rules={[{ required: true, message: 'Missing stand cost' }]}
>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add field
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form>
);
};

export default YourComponent;
Please replace // Your options here with your actual options for the Select component. Each option should be an object with value and label properties. This is a general example and you might need to adjust it according to your needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai133d ago
<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below
More Posts
HR application in refine.devHi, i am trying to find link for Refine HR / HR Application. Where can i get the codes and demo? Thahow to make select component with custom resource result keys?I have resource url: dictionaries/items It returns json: [ { "id": 1, "name": "*getting error in customtitlle handlerGetting this error in custom title handler const customTitleHandler = ({ resource, action, params }how to detect inactive user to auto logoutHow can I make auto logout or expire the session after 5 minutes of user inactivity in refine?workflow applicationHi, can i use refine.dev to create a workflow application. Is there any example that i can refer to?If there is only one QR code on the login interface and one code for login parametersIf there is only one QR code on the login interface and one code for login parameters, how should I Hello, I've just cloned refine.dev fromHello, I've just cloned refine.dev from https://github.com/refinedev/refine.git and then ran the proHow can i use customDocumenttitle handlerThis is my App.tsx file i want to use custom DocumentTitleHandlerclient side paginationhow to make this page handle pagination at client sidepagination chakra ui inferenceIs there any suggestion how to give the proper data structure from backend so that the inference wilSave 2 resources at same timeHello, I'm using ant design with stripe4, how can I save 2 resources at same time?set field value in form antdformProps.form?.setFieldValue(id, selectedConfig?.id); <Form {...formProps} layout="vertical"> No matching exportsI got this error when running the project after accidently deleting yarn.lock and initializing yarn warnWhenUnsavedChanges is getting asked twiceI have to click "Cancel" or "Okay" twice when warnWhenUnsavedChanges is being active on my Modal forDoes someone has an example for a pageDoes someone has an example for a page in react for editing a singleton in the backend?How to make the Navigation menu not be based on resourcesHow can I change my navigation menu to not be based on resources?How to change the header from 'refine project' to my ownThis is my index.tsx file for header component import type { RefineThemedLayoutV2HeaderProps } from PocketBase - Open Source backend in 1 fi...Hello! I'm wondering if there are any https://pocketbase.io/ users here (or people interested in usieditable show table antdHi guys, I have a show table using refine, antd table Can I add a button to add a new row on that taSingle resource configHow can I implement a category that only holds a single item of a resource? e.g: I'd like to have a