crude-lavender•2y ago

Change object in edit form

Hi everyone, i have a endpoint offers in which i have a field ski_resort. I have an other endpoint ski_resorts which return all the ski resort available. I display the all the ski resort in edit offer form with the useSelect() hook. I would like to change all the field ski_resort in the obejct with with ski_resorts endpoint response. How can I do that ? Here is my useSelect hook

 const {options} = useSelect<ISkiResorts>({
        hasPagination: false,
        resource: "all_ski_resorts",
        optionLabel: "name",
        optionValue: "id"
    });

 const {options} = useSelect<ISkiResorts>({
        hasPagination: false,
        resource: "all_ski_resorts",
        optionLabel: "name",
        optionValue: "id"
    });

Here is an Offer object

 {
        "id": 1,
        "main_picture_url": "",
        "ski_resort": {
            "id": 2,
            "name": "Test",
            "short_name": "Test",
            "active": true
        },
        "date_from": "2021-12-27T00:00:00+00:00",
        "date_to": "2022-04-23T00:00:00+00:00",
        "from_price": 4000,
        "promo_price": 3000,
        "active": true,
        "rank": 2,
        "title": "Here is the title",
        "description": "Here is the description",
        "discount_amount": 5000,
        "validity_period": "Test"
    },

 {
        "id": 1,
        "main_picture_url": "",
        "ski_resort": {
            "id": 2,
            "name": "Test",
            "short_name": "Test",
            "active": true
        },
        "date_from": "2021-12-27T00:00:00+00:00",
        "date_to": "2022-04-23T00:00:00+00:00",
        "from_price": 4000,
        "promo_price": 3000,
        "active": true,
        "rank": 2,
        "title": "Here is the title",
        "description": "Here is the description",
        "discount_amount": 5000,
        "validity_period": "Test"
    },

Here is a ski_resort object return by the ski_resorts endpoint

{
        "id": 1,
        "name": "Chamonix",
        "short_name": "CHAM",
        "contractor_id": 105,
        "longitude": 6.86889,
        "latitude": 45.9222,
        "active": true,
        "domains": [
           // all domains 
        ],
        "consumercategories": [],
        "active_sales": false,
        "keycard_provider": "TA",
        "is_skiogrande": false,
        "offers": []
}

{
        "id": 1,
        "name": "Chamonix",
        "short_name": "CHAM",
        "contractor_id": 105,
        "longitude": 6.86889,
        "latitude": 45.9222,
        "active": true,
        "domains": [
           // all domains 
        ],
        "consumercategories": [],
        "active_sales": false,
        "keycard_provider": "TA",
        "is_skiogrande": false,
        "offers": []
}

4 Replies

crude-lavender•2y ago

here is my select component

<TextField

    {...register("ski_resort", {
        value: selected
    })}
    className="flex-container-resort-select"
    name="ski_resort"
    value={selected}
    onChange={(e) => {
        setSelected(e.target.value);
    }}
    select
>
    {options?.map((skiResort) => (
        <MenuItem
            key={`/api/ski_resorts/${skiResort.value}`}
            value={`/api/ski_resorts/${skiResort.value}`}
        >
            {skiResort.label}
        </MenuItem>
    ))}
</TextField>

<TextField

    {...register("ski_resort", {
        value: selected
    })}
    className="flex-container-resort-select"
    name="ski_resort"
    value={selected}
    onChange={(e) => {
        setSelected(e.target.value);
    }}
    select
>
    {options?.map((skiResort) => (
        <MenuItem
            key={`/api/ski_resorts/${skiResort.value}`}
            value={`/api/ski_resorts/${skiResort.value}`}
        >
            {skiResort.label}
        </MenuItem>
    ))}
</TextField>

and here is my initial state selected :

setSelected(`/api/ski_resorts/${record?.ski_resort.id}`);

setSelected(`/api/ski_resorts/${record?.ski_resort.id}`);

Omer•2y ago

Hey @harisris 👋 , Thank you for contacting us! I'm not sure the question is exactly about Refine. Is this a general React question or is there something Refine can't do?

crude-lavender•2y ago

Hi @Omer The useSelect hook allow value props and label props and i would like to update the value props to an object et define the different object field within this props to send it to the API to update the ski_resort field in offers endpoint with the infos from the ski_resorts endpoint

Omer•2y ago

hmm you can access raw data with queryResult parameter of useSelect https://refine.dev/docs/api-reference/core/hooks/useSelect/#return-values