Display list object in Select
Hi ! How can i show my clients key in the Select component (which is a list of object of type {id: string, config: {}), and i want to show the name by default in the Select component:
here is a exemple of result of the resource "session" with a given id :
As you can see, i want to show in the select all clients id
import {ReactElement} from "react";
import {useParams} from "react-router-dom";
import ISession from "../../interfaces/ISession";
import {Edit, useForm} from "@refinedev/antd";
import {Button, Col, Form, Row, Select, Typography} from "antd";
import {Input} from "antd/lib";
import {CreateTitleIcon, GenerateFormItem} from "../../utils/refineUtils";
import TextArea from "antd/es/input/TextArea";
import {PROVIDERS} from "../../resources/refineConfig";
const {Title, Text} = Typography
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
});
return (
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
<GenerateFormItem label="Clients" name="clients" icon="ant-design:login-outlined" component={
<Select options={[]} mode="tags" allowClear/>
}/>
</Form>
</Edit>
)
}import {ReactElement} from "react";
import {useParams} from "react-router-dom";
import ISession from "../../interfaces/ISession";
import {Edit, useForm} from "@refinedev/antd";
import {Button, Col, Form, Row, Select, Typography} from "antd";
import {Input} from "antd/lib";
import {CreateTitleIcon, GenerateFormItem} from "../../utils/refineUtils";
import TextArea from "antd/es/input/TextArea";
import {PROVIDERS} from "../../resources/refineConfig";
const {Title, Text} = Typography
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
});
return (
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
<GenerateFormItem label="Clients" name="clients" icon="ant-design:login-outlined" component={
<Select options={[]} mode="tags" allowClear/>
}/>
</Form>
</Edit>
)
}here is a exemple of result of the resource "session" with a given id :
{"id":"1c94f479-e611-4336-8127-0b9e0de0b46b","title":"LAWeb - C","description":"Bla bla bla...","author":"...","duration":120,"url":"https://dev.userprofile.learninglab.eu/lti","clients":[{"id":"laweb","config":{"scenario":"c"}}],"authentications":[{"id":"lti-i507"}],"activities":[{"id":"...","name":"...","start":"2023-06-07 15:00:00","end":"2023-06-07 17:00:00","tutor":"...","users":["toto.toto","titi.titi"]}]}{"id":"1c94f479-e611-4336-8127-0b9e0de0b46b","title":"LAWeb - C","description":"Bla bla bla...","author":"...","duration":120,"url":"https://dev.userprofile.learninglab.eu/lti","clients":[{"id":"laweb","config":{"scenario":"c"}}],"authentications":[{"id":"lti-i507"}],"activities":[{"id":"...","name":"...","start":"2023-06-07 15:00:00","end":"2023-06-07 17:00:00","tutor":"...","users":["toto.toto","titi.titi"]}]}As you can see, i want to show in the select all clients id
