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
– Nick Parsons, Commented Feb 4, 2019 at 12:59

adiga · Accepted Answer · 2019-02-04 13:08:36Z

1

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

edited Feb 4, 2019 at 13:08

answered Feb 4, 2019 at 12:59

adiga

35.4k9 gold badges65 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonas Wilms · Accepted Answer · 2019-02-04 12:59:48Z

0

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

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

answered Feb 4, 2019 at 12:59

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Comments

Niall · Accepted Answer · 2019-02-04 13:05:21Z

0

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

answered Feb 4, 2019 at 13:05

Niall

80410 silver badges28 bronze badges

Comments

Shraddha Goel · Accepted Answer · 2019-02-04 13:06:52Z

0

   ...(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!

answered Feb 4, 2019 at 13:06

Shraddha Goel

8477 silver badges18 bronze badges

Collectives™ on Stack Overflow

conditional object as array value

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related