conditional object as array value

Question

I am trying to achieve the following:
In React, I have a component where a prop takes an array with objects, whereafter that component displays these objects in a dropdown menu item.
I would like to make some of thesedropdown menu items conditionally. In other words: some users may see a dropdown item, where others won't.

What is the correct way to achieve this? I tried using the spread operator (according to this Answer, but I keep getting the error

TypeError: Invalid attempt to spread non-iterable instance

What am I doing wrong?

My code:

<Dropdown
    type="link"
    itemsObject={
       [...states.all.map(state => ({
           value: state.name,
           onClick: () => {
               this.updateCandidate(candidate, {state_id: state.id})
           }
        })),
        {
            isDivider: true
        },
        {
            value: "Notities bewerken",
            onClick: () => {
                this.openCandidateModel(candidate)
            }
        },
        ...(candidate.state.id === 2 ? [{
                value: "Afspraak beheren",
                onClick: () => {
                    this.openCandidateModel(candidate)
                }
           }] : undefined)
    ]}
/>

well, I guess if your ternary operator results in `undefined` it cannot be spread. Try wrapping undefined in brackets: `[undefined]` or using `[]` instead — Nick Parsons, Feb 04 '19 at 12:59

adiga · Accepted Answer · 2019-02-04T13:08:36.857

You're trying to spread undefined when candidate.state.id !== 2. Change it to:

...(candidate.state.id === 2 ? [{
                value: "Afspraak beheren",
                onClick: () => {
                    this.openCandidateModel(candidate)
                }
           }] : [])

Also, it's probably worth mentioning that {...undefined} is valid but [...undefined] isn't: Spreading undefined in array vs object

score 0 · Answer 2 · answered Feb 04 '19 at 12:59

0

You cannot spread undefined, but you can spread an empty array:

 [...undefined] // doesnt work
 [...[]] // works

answered Feb 04 '19 at 12:59

Jonas Wilms

132,000
20
149
151

score 0 · Answer 3 · answered Feb 04 '19 at 13:05

0

You are trying to spread undefined that is causing the error. Use ? [{}] : []

answered Feb 04 '19 at 13:05

Niall

804
10
27

score 0 · Answer 4 · answered Feb 04 '19 at 13:06

   ...(candidate.state.id === 2 ? [{
            value: "Afspraak beheren",
            onClick: () => {
                this.openCandidateModel(candidate)
            }
       }] : undefined)

I believe the problem should be in this part as you can't spread undefined you can use empty array instead [ ].

Thanks!

conditional object as array value

4 Answers4