Display list object select

Hello ! I get feedback like this
{
...
clients: [
{
name: "test"
age: 22
}, {...}, ...
]
}
{
...
clients: [
{
name: "test"
age: 22
}, {...}, ...
]
}
I retrieve this data via a useForm And i want, in a Form.Item, show all the clients name of the retrieve data in a select tag, how ?
6 Replies
kapa.ai
kapa.ai2y ago
Hi @realdragonma. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai2y ago
---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation (https://refine.dev/docs) for more information and examples on how to use useForm and other hooks. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Overview | refine
What is refine?
kapa.ai
kapa.ai2y ago
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
quickest-silver
quickest-silverOP2y ago
@kapa.ai I'll tell you more then Here is my class :
export default function SessionsEdit(): ReactElement | null {

// Variables

const { id } = useParams();

// Initiate the form
const {formProps, saveButtonProps, formLoading, queryResult} = useForm<ISession>({
warnWhenUnsavedChanges: true,
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "session",
id: id
});


const { selectProps } = useSelect<IClient>({
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "clients",
optionLabel: "id",
optionValue: "name"
});


return (
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
<GenerateFormItem label="Clients" name={["clients"]} icon="ant-design:login-outlined" component={
<Select
{...selectProps}
mode="multiple"
allowClear
/>
}/>
</Form>
</Edit>
)
}
export default function SessionsEdit(): ReactElement | null {

// Variables

const { id } = useParams();

// Initiate the form
const {formProps, saveButtonProps, formLoading, queryResult} = useForm<ISession>({
warnWhenUnsavedChanges: true,
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "session",
id: id
});


const { selectProps } = useSelect<IClient>({
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "clients",
optionLabel: "id",
optionValue: "name"
});


return (
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
<GenerateFormItem label="Clients" name={["clients"]} icon="ant-design:login-outlined" component={
<Select
{...selectProps}
mode="multiple"
allowClear
/>
}/>
</Form>
</Edit>
)
}
The queryResults?.data?.data is something like this : exemple :
{"id":"0","title":"LAWeb - SQL","description":"...","url":"","clients":[{"id":"laweb","config":{}}],"authentications":[{"id":"yes-yes"}],"activities":[]}
{"id":"0","title":"LAWeb - SQL","description":"...","url":"","clients":[{"id":"laweb","config":{}}],"authentications":[{"id":"yes-yes"}],"activities":[]}
So, i just want to show in the select, the clients of the retrieve data (just by her id) So with this exemple, i just want that when i load the page, my select is prefill with "yes-yes" Do you understand ?
kapa.ai
kapa.ai2y ago
Let me check the knowledge base for you. One moment! :books: ---------------------- I understand your requirement now. You want to prefill the select component with the clients' ids from the retrieved data. You can achieve this by setting the defaultValue prop in the useSelect hook. First, extract the clients' ids from the queryResult:
const clientIds = queryResult?.data?.data?.clients?.map((client: IClient) => client.id);
const clientIds = queryResult?.data?.data?.clients?.map((client: IClient) => client.id);
Then, pass the clientIds as the defaultValue prop in the useSelect hook:
const { selectProps } = useSelect<IClient>({
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "clients",
optionLabel: "id",
optionValue: "name",
defaultValue: clientIds,
});
const { selectProps } = useSelect<IClient>({
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "clients",
optionLabel: "id",
optionValue: "name",
defaultValue: clientIds,
});
Now, your select component should be pre-filled with the clients' ids from the retrieved data. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2y ago
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

Did you find this page helpful?