conscious-sapphire•3y 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•3y 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•3y ago

<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

conscious-sapphireOP•3y 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•3y 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•3y ago

<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

stormy-gold•3y ago

You can use Form.Item component from antd package. The ‘name’ prop of the component may help you.

conscious-sapphireOP•3y ago

I already tried a lot of solution, even with "name", I never find a issue for my case

stormy-gold•3y 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

conscious-sapphireOP•3y 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]

conscious-sapphireOP•3y 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•3y 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>
  );
}

kapa.ai•3y ago

<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

Display list object in Select

Did you find this page helpful?