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.ai12mo 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.ai12mo 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.ai12mo ago
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
conscious-sapphire
conscious-sapphire12mo 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.ai12mo 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.ai12mo ago
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below