causal-orange
causal-orange•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
causal-orange
causal-orangeOP•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
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?
causal-orange
causal-orangeOP•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
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

Did you find this page helpful?