eastern-cyan
eastern-cyan17mo 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
eastern-cyan
eastern-cyan17mo 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
Omer17mo 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?
eastern-cyan
eastern-cyan17mo 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
Omer17mo ago
hmm you can access raw data with queryResult parameter of useSelect https://refine.dev/docs/api-reference/core/hooks/useSelect/#return-values