JS Conditional Add to Object Array gives incorrect result in a React application

Question

In a React application I have this conditional add to an array,

var flag = .. // returns TRUE or FALSE

infographicObjectsArray.push({
    "buttons": [
            {"id":"viewAgreementsButton","variant":"outline-" + variantType,"text":"View Agreement","url":"/viewAgreementForm?id=" + eligibleSingleAgreement.id},
            flag && 
                {"id":"newAgreementButton","variant":variantType,"text":"New Agreement","url":"/newAgreementType"}
               
            ]                           
});

The 2nd item is false rather than the object created. Note that this is React, so something else may be at play.

If removing the spread syntax makes the error go away, but causes another, why not ask about the other error? Because this error is easily explainable. — Heretic Monkey, Jun 28 '21 at 20:14
Conditionally adding array items works way better with a simple `if` statement than trying to cram as much syntax and operations at once just to save yourself a line or two of code. — VLAZ, Jun 28 '21 at 20:17
I updated the post to show what happens when I remove `...`. Since I'm in a React app, the 2nd array element somehow gets filled incorrectly as a result of the `Flag &&` operator. — gene b., Jun 28 '21 at 20:26
"*Note that this is React, so something else may be at play.*" no, [this is how logical `&&` operates in JavaScript](https://stackoverflow.com/questions/3163407/javascript-and-operator-within-assignment). See also: [What does the construct x = x || y mean?](https://stackoverflow.com/q/2802055) | [JavaScript OR (||) variable assignment explanation](https://stackoverflow.com/q/2100758) | [Logical operator || in javascript, 0 stands for Boolean false?](https://stackoverflow.com/q/9579262) for other similar usages of logical operators. This is all just vanilla JS. — VLAZ, Jun 28 '21 at 20:35

score 1 · Answer 1 · answered Jun 28 '21 at 20:10

1

The expression

flag &&
    {
      "id": "newAgreementButton",
      "variant": variantType,
      "text": "New Agreement",
      "url": "/newAgreementType"
    }

Will return either an object or undefined, depending on the value of flag. Neither is iterable, so in both cases, you will get a type error when you try to iterate it (i.e. when you use the spread operator).

You probably want to:

var flag = .. // returns TRUE or FALSE

infographicObjectsArray.push({
    "buttons": [
            {id: 1},
            flag && {id : 2}
            ].filter(v => v) // filter out `undefined` if `flag` is `false`                  
});

answered Jun 28 '21 at 20:10

junvar

11,151
2
30
46

Thanks. However, that doesn't work in a React app. I've updated the OP. – gene b. Jun 28 '21 at 20:27
clarify "that doesn't work". Do you get an error message? Does your computer blow up? – junvar Jun 28 '21 at 21:13
Re-read the OP which was updated. A screenshot shows that the wrong value gets stored in Element #2 with that syntax. – gene b. Jun 29 '21 at 02:03
That's what the `.filter` is for. – junvar Jun 29 '21 at 02:15
So are you saying that all the `...flag &&` solutions given here are wrong? https://stackoverflow.com/questions/11704267/in-javascript-how-to-conditionally-add-a-member-to-an-object/38483660 None of them have your filter. They just say that you can do `...someCondition &&`. Here are some answers that don't work: https://stackoverflow.com/a/62914410/1005607 , https://stackoverflow.com/a/55396398/1005607, https://stackoverflow.com/a/51200448/1005607 . Or how about this: https://dev.to/jfet97/comment/9la1 `...condition && {prop:value} ` – gene b. Jun 29 '21 at 15:14
Those answers are spreading objects inside objects. Your case is trying to spread an object inside an array, which requires iterating the object, which is not possible. Why don't you just try this code I provided and report back if you get any errors? – junvar Jun 29 '21 at 17:10

JS Conditional Add to Object Array gives incorrect result in a React application

1 Answers1