Add an item to a SP list with a managed metadata column in SPFx webpart

Question

I've a list in SPFx with a column type of Managed metadata. Now I'll add an item in that list with a web part. But how can I do this?

import { TaxonomyPicker, IPickerTerm } from "@pnp/spfx-controls-react/lib/TaxonomyPicker";

public async addNew(product: Product): Promise<void> {
    const resp = await this
        .web
        .lists
        .getById('xxx')
        .items
        .add({
            Title: product.title,
            Category: product.category ? {
                TermGuid: product.category.key,
                Label: product.category.name
            } : null
        });

    console.log(resp);
}

product.category is type of IPickerTerm comming from TaxonomyPicker of my React component.

Code above doesn't throw an error but when I selected the added item again, the category is empty.

<d:Category m:type="SP.Taxonomy.TaxonomyFieldValue">
    <d:Label>0</d:Label>
    <d:TermGuid></d:TermGuid>
    <d:WssId m:type="Edm.Int32">0</d:WssId>
</d:Category>

Do I miss anything here?

Answer 1

I must send this with __metadata inside Category and with a WssId:

let toSend: any = {
    Title: product.title,
    Category: product.category ? {
        __metadata: {
            type: 'SP.Taxonomy.TaxonomyFieldValue'
        },
        TermGuid: product.category.key,
        Label: product.category.name,
        WssId: -1
    } : null
}