React and Axios Post payload formatting-CodePudding

I'm really new to this so forgive me if I word things wrong. So right now I have a simple web UI with a text box for a Name, and then a checkmark selection box for a type, along with a submit button.

Test code looks something like this:

value = "val7";
key = "63";
typeID = 103;
name = "testname";

const onSubmitClick = (event) => {
    axiosPost('testurl',
    {
        Message: {
            Type: typeID,
            Payload: {
                title: null,
                messagebody: null,
                data: {
                    value,
                    key,
                },
            },
            Delivery: {
                Name: [{"Name": name}]
            }
        }
    })
}

and when I press submit, the Payload looks like this:

{
    "Message": {
        "Type": 103,
        "Payload": {
            "title": null,
            "messagebody": null,
            "data": {
                "value": "val17",
                "key": "63"
            }
        },
        "Delivery": {
            "Name": [{
                "Name": "testname"
            }]
        }
    }
}

However, I need the data portion of the payload to look more like this:

{
    "Message": {
        "Type": 103,
        "Payload": {
            "title": null,
            "messagebody": null,
            "data": {
                "val17": "63"
            }
        },
        "Delivery": {
            "Name": [{
                "Name": "testname"
            }]
        }
    }
}

How do I go about doing this?

CodePudding user response：

make: key = 'val7' value = '63'

in request

{
        Message: {
            Type: typeID,
            Payload: {
                title: null,
                messagebody: null,
                data: {
                    [key]: value
                },
            },
            Delivery: {
                Name: [{"Name": name}]
            }
        }
    }