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•14mo 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•14mo 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•14mo ago

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

ratty-blush•14mo 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•14mo 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•14mo ago

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