Inserting Javascript array elements into another array with ternary operator

Question

I have an array of objects where each object defines a field in a React form. I want to display different sequence of fields depending on a boolean state. This means that I need to insert either one object or three objects into the array at a specific index. Works for a single object, but I am struggling to figure out how to insert multiple objects.

const [shortForm] = useState(false);

const shortFormFields = {"fieldName":"foo"}

const longFormFields = [
      {"fieldName":"bar"},
      {"fieldName":"baz"},
      {"fieldName":"qux"}]


const finalFieldList = [
      {"fieldName":"waldo"},
      shortForm === true? shortFormFields : INSERT-BAR-BAZ-QUX-HERE,
      {"fieldName":"xyzzy"}]

If you have an array, and want to insert (or delete) elements in the existing array, you should take a look at Array.prototype.splice — some
– some, Commented May 25, 2024 at 7:22

Mamun · Accepted Answer · 2024-05-25 06:33:21Z

0

You can use the spread synatx (...) along with the conditional (ternary) operator.

const finalFieldList = [
 { "fieldName": "waldo" },
 ...(shortForm ? [shortFormFields] : longFormFields),
 { "fieldName": "xyzzy" }
];

answered May 25, 2024 at 6:33

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

1 Comment

Alexander Nenashev Over a year ago

you don't need parentheses here, since the spread is syntax, not an operator

Collectives™ on Stack Overflow

Inserting Javascript array elements into another array with ternary operator

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related