Adding 1 additional object to the map function ES6

Question

I have a code in place which looks like this -

 mapFn={response => (response.data && response.data.map(secret => ({
                  label: secret.secretName,
                  value: secret.id
                })))}

I need to add one more additional object to response.data before it maps and sets it tp mapFn. So I tried something like -

 mapFn={response => (response.data &&
                response.data.append({label: "Select Vault ID", value: "value"})
                && response.data.map(secret => ({
                  label: secret.secretName,
                  value: secret.id
                })))}

But I am getting an error as -

TS2339: Property 'append' does not exist on type 'SecretSummary[]

Answer 1

response.data is an array. Arrays don't have an .append method. They do have a .push method, but it returns a number, rather than the array (and it mutates, which is forbidden in React). Another issue is that the object you're adding has a label and value property - which sounds like something that should be added after mapping, not before mapping.

Spread the mapped into a new array, and list the object you want to add at the end.

mapFn = {
    response => response.data &&
        [
            ...response.data.map(secret => ({
                label: secret.secretName,
                value: secret.id
            })),
            { label: "Select Vault ID", value: "value" }
        ]
}

(If you wanted to add the object before mapping, you'd probably want to use the secretName and id properties when defining the object instead, because otherwise calling the .map callback with the object wouldn't make sense.)