rare-sapphire
rare-sapphire12mo ago

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:
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
12 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: ---------------------- To show the clients' ids in the Select component, you can use the useSelect hook from Refine. First, you need to import the useSelect hook and modify your SessionsEdit component to utilize it. Here's an example of how to do that:
import { useSelect } from "@refinedev/core";
// ... other imports

export default function SessionsEdit(): ReactElement | null {
// ... other code

const { options } = useSelect<{ id: string; config: {} }>({
resource: "clients",
optionLabel: "id",
});

return (
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
<GenerateFormItem
label="Clients"
name="clients"
icon="ant-design:login-outlined"
component={
<Select options={options} mode="tags" allowClear />
}
/>
</Form>
</Edit>
);
}
import { useSelect } from "@refinedev/core";
// ... other imports

export default function SessionsEdit(): ReactElement | null {
// ... other code

const { options } = useSelect<{ id: string; config: {} }>({
resource: "clients",
optionLabel: "id",
});

return (
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
<GenerateFormItem
label="Clients"
name="clients"
icon="ant-design:login-outlined"
component={
<Select options={options} mode="tags" allowClear />
}
/>
</Form>
</Edit>
);
}
In this example, we're using the useSelect hook to fetch the clients' data and set the optionLabel to "id" to display the clients' ids in the Select component. The options returned by the useSelect hook are then passed to the Select component. Please note that the provided code snippets are based on the information extracts and may require some adjustments to fit your specific use case. ---------------------- 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
rare-sapphire
rare-sapphire12mo ago
@kapa.ai You seem to not understand that I want the Select prefilled by the "clients" present in the queryResults of the useForm. Here is what i want to edit :
{"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"}}, {"id":"cas", "config":{}}],"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"}}, {"id":"cas", "config":{}}],"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 may see, "clients" is a list objet of type {id: string, config: any}[] So in this example, i would like to have "laweb" and "cas" prefilled in the Select
kapa.ai
kapa.ai12mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the misunderstanding. To prefill the Select component with the clients' ids from the queryResult, you can use the queryResult data and map it to the Select component's value. Here's how you can do that:
import { useEffect, useState } from "react";
// ... other imports

export default function SessionsEdit(): ReactElement | null {
// ... other code

const { data } = queryResult;
const [selectedClients, setSelectedClients] = useState<string[]>([]);

useEffect(() => {
if (data) {
setSelectedClients(data.clients.map((client: { id: string; config: any }) => client.id));
}
}, [data]);

return (
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
<GenerateFormItem
label="Clients"
name="clients"
icon="ant-design:login-outlined"
component={
<Select
options={[]} // You can replace this with the options you want to display
mode="tags"
allowClear
value={selectedClients}
onChange={(value) => setSelectedClients(value)}
/>
}
/>
</Form>
</Edit>
);
}
import { useEffect, useState } from "react";
// ... other imports

export default function SessionsEdit(): ReactElement | null {
// ... other code

const { data } = queryResult;
const [selectedClients, setSelectedClients] = useState<string[]>([]);

useEffect(() => {
if (data) {
setSelectedClients(data.clients.map((client: { id: string; config: any }) => client.id));
}
}, [data]);

return (
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
<GenerateFormItem
label="Clients"
name="clients"
icon="ant-design:login-outlined"
component={
<Select
options={[]} // You can replace this with the options you want to display
mode="tags"
allowClear
value={selectedClients}
onChange={(value) => setSelectedClients(value)}
/>
}
/>
</Form>
</Edit>
);
}
In this example, we're using the useState and useEffect hooks from React. We initialize a state called selectedClients to store the selected clients' ids. When the queryResult data is available, we update the selectedClients state with the clients' ids from the data. Then, we set the value prop of the Select component to selectedClients and handle the onChange event to update the selectedClients state when the user makes changes to the selection. Please note that the provided code snippets are based on the information extracts and may require some adjustments to fit your specific use case. ---------------------- 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
equal-aqua
equal-aqua12mo ago
You can use Form.Item component from antd package. The ‘name’ prop of the component may help you.
rare-sapphire
rare-sapphire12mo ago
I already tried a lot of solution, even with "name", I never find a issue for my case
equal-aqua
equal-aqua12mo ago
In the example code, you need to remove options because the Form.Item pass the value and onChange to its children. I don't see any other error
rare-sapphire
rare-sapphire12mo ago
As you may see here, my clients (I put you a input because we can see the error in details) are show as [objet Object]. And i dont want that. Here is an example of the data i want to show :
{
"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":[]
}
My "clients" key is a list object (type: {id: string, config: {}}[] So in my Select, with this example, I just want "laweb" (in this example) and not [object Object]
No description
rare-sapphire
rare-sapphire12mo ago
Here is my code :
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 (input)"
name="clients"
icon="ant-design:login-outlined"
component={
<Input/>
}
/>
<GenerateFormItem
label="Clients (input)"
name="clients"
icon="ant-design:login-outlined"
component={
<Select mode="tags"/>
}
/>
{/* ... /*}
</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
});


return (
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
{/* ... */}
<GenerateFormItem
label="Clients (input)"
name="clients"
icon="ant-design:login-outlined"
component={
<Input/>
}
/>
<GenerateFormItem
label="Clients (input)"
name="clients"
icon="ant-design:login-outlined"
component={
<Select mode="tags"/>
}
/>
{/* ... /*}
</Form>
</Edit>
)
}
Sorry if I'm not making myself clear, i'm french, my english may not be good and clear @kapa.ai Do you have any suggestion with taking in note what we said ?
kapa.ai
kapa.ai12mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Based on our previous discussion, you can prefill the Select component with the clients' ids from the queryResult by using the queryResult data and mapping it to the Select component's value. Here's how you can do that:
import { useEffect, useState } from "react";
// ... other imports

export default function SessionsEdit(): ReactElement | null {
// ... other code

const { data } = queryResult;
const [selectedClients, setSelectedClients] = useState<string[]>([]);

useEffect(() => {
if (data) {
setSelectedClients(data.clients.map((client: { id: string; config: any }) => client.id));
}
}, [data]);

return (
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
<GenerateFormItem
label="Clients"
name="clients"
icon="ant-design:login-outlined"
component={
<Select
options={[]} // You can replace this with the options you want to display
mode="tags"
allowClear
value={selectedClients}
onChange={(value) => setSelectedClients(value)}
/>
}
/>
</Form>
</Edit>
);
}
import { useEffect, useState } from "react";
// ... other imports

export default function SessionsEdit(): ReactElement | null {
// ... other code

const { data } = queryResult;
const [selectedClients, setSelectedClients] = useState<string[]>([]);

useEffect(() => {
if (data) {
setSelectedClients(data.clients.map((client: { id: string; config: any }) => client.id));
}
}, [data]);

return (
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
<GenerateFormItem
label="Clients"
name="clients"
icon="ant-design:login-outlined"
component={
<Select
options={[]} // You can replace this with the options you want to display
mode="tags"
allowClear
value={selectedClients}
onChange={(value) => setSelectedClients(value)}
/>
}
/>
</Form>
</Edit>
);
}
In this example, we're using the useState and useEffect hooks from React. We initialize a state called selectedClients to store the selected clients' ids. When the queryResult data is available, we update the selectedClients state with the clients' ids from the data. Then, we set the value prop of the Select component to selectedClients and handle the onChange event to update the selectedClients state when the user makes changes to the selection. Please note that the provided code snippets are based on the information extracts and may require some adjustments to fit your specific use case. ---------------------- 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