I am currently fetching information from an API endpoint and updating the values of an antd Form component. I am able to update values for numeric and text inputs using setFieldsValue() but for selects things are a bit more complicated. My code currently looks like this:
<Form
{...layout}
name="basic"
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
form={form}
>
[... Other form items removed for simplicity]
<Form.Item
label="NFT Status"
name="nftStatus"
>
<Select defaultValue="not-minted" style={{ width: 120 }} onChange={handleNftStatusChange}>
<Option value="minted">Minted</Option>
<Option value="not-minted">Not minted</Option>
<Option value="sold">Sold</Option>
</Select>
</Form.Item>
<Form.Item
label="Controls"
>
<Button style={{ marginRight: 15 }}>Cancel</Button>
<Button type="primary" htmlType="submit">Save</Button>
</Form.Item>
</Form>
And this is the code used to update the form values:
async function getCollectible(tokenId, contractAddress) {
try {
const asset = await seaport.api.getAsset({
tokenAddress: contractAddress,
tokenId: tokenId,
});
const getNftStatus = () => {
if (asset.numSales !== 0) {
return 'sold';
} else if (asset.numSales === 0 && asset.orders.length === 0) {
return 'not-minted';
} else {
return 'minted';
}
};
// Write information from response into form inputs
form.setFieldsValue({
artworkName: asset.name,
description: asset.description,
externalLink: asset.externalLink,
artist: asset.owner.address,
nftStatus: getNftStatus(),
price: asset.lastSale ? (asset.lastSale.totalPrice / 1000000000000000000) : ''
});
} catch(e) {
console.log(e);
}
}
All input values are properly set when running the getCollectible() function that uses form.setFieldsValue(), except for the select. I'm not sure how to update its value programatically. Any ideas?