React-hook-form fields based on API call.

I hit an API to get fields for a product. The field properties usually get defined before with Zod. The problem is if the API got changed it won't be in sync. Example of the res data:
{
"id": 766,
"name": "Kapak & Kılıf",
"displayName": "Kapak & Kılıf",
"categoryAttributes": [
{
"allowCustom": true,
"attribute": { "id": 47, "name": "Renk" },
"attributeValues": [],
"categoryId": 766,
"required": true,
"varianter": false,
"slicer": true
},
{
"allowCustom": false,
"attribute": { "id": 14, "name": "Materyal" },
"attributeValues": [
{ "id": 99, "name": "Polyester" },
{ "id": 85, "name": "Hakiki Deri" },
{ "id": 103, "name": "Silikon" },
{ "id": 105, "name": "Suni Deri" },
{ "id": 96, "name": "Plastik" }
],
"categoryId": 766,
"required": false,
"varianter": false,
"slicer": false
},
{
"allowCustom": false,
"attribute": { "id": 32, "name": "Model" },
"attributeValues": [
{ "id": 865, "name": "Arka Kapak" },
{ "id": 866, "name": "Cüzdan Kılıf" },
{ "id": 867, "name": "Çerçeve" }
],
"categoryId": 766,
"required": false,
"varianter": false,
"slicer": false
}
]
}
{
"id": 766,
"name": "Kapak & Kılıf",
"displayName": "Kapak & Kılıf",
"categoryAttributes": [
{
"allowCustom": true,
"attribute": { "id": 47, "name": "Renk" },
"attributeValues": [],
"categoryId": 766,
"required": true,
"varianter": false,
"slicer": true
},
{
"allowCustom": false,
"attribute": { "id": 14, "name": "Materyal" },
"attributeValues": [
{ "id": 99, "name": "Polyester" },
{ "id": 85, "name": "Hakiki Deri" },
{ "id": 103, "name": "Silikon" },
{ "id": 105, "name": "Suni Deri" },
{ "id": 96, "name": "Plastik" }
],
"categoryId": 766,
"required": false,
"varianter": false,
"slicer": false
},
{
"allowCustom": false,
"attribute": { "id": 32, "name": "Model" },
"attributeValues": [
{ "id": 865, "name": "Arka Kapak" },
{ "id": 866, "name": "Cüzdan Kılıf" },
{ "id": 867, "name": "Çerçeve" }
],
"categoryId": 766,
"required": false,
"varianter": false,
"slicer": false
}
]
}
categoryAttributes.index.attribute.name should be the field name I suppose but how can I assign it to react-hook-form. I can't tell the name or if it required so I can make it as required in the form since it is an API call. I know the shape of the response only. Is there a way around or I need to hard type them in the zod scheme and react-hook-form?
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server