How to insert an element in a array of ReactJS component objects (between existing elements)

Question

I have an array of <FilterGroup /> objects. I want to insert a <Conjunction />object after each <FilterGroup> object except the last one.

So the array should go from:

[
    <FilterGroup />
    <FilterGroup />
    <FilterGroup />
    <FilterGroup />
]

To:

[
    <FilterGroup />
    <Conjunction />  
    <FilterGroup />
    <Conjunction />
    <FilterGroup />
    <Conjunction />
    <FilterGroup />
]

My attempts so far have led me to:

filterGroups.filter(function(filterGroup, index) {
    if(index !== filterGroups.length-1){
        filterGroups.push(<Conjunction key={index} />);
    }
})

I need to replace push() as it appends the element onto the end of the array.

T.J. Crowder · Accepted Answer · 2018-12-20 14:48:08Z

The usual React-like way would be to create a new array:

const result = [];
for (const entry of original) {
    if (result.length > 0) {
        result.push("<Conjunction />");
    }
    result.push(entry);
}

Example using strings instead of elements:

var original = [
    "<FilterGroup />",
    "<FilterGroup />",
    "<FilterGroup />",
    "<FilterGroup />"
];
const result = [];
for (const entry of original) {
    if (result.length > 0) {
        result.push("<Conjunction />");
    }
    result.push(entry);
}
console.log(result);

(Yes, you can shoe-horn that into a reduce call, because any array operation can be shoe-horned into a reduce call, but it doesn't buy you anything.)

But if you want to modify an existing array, you can use splice:

for (let i = theArray.length - 1; i > 0; --i) {
    theArray.splice(i, 0, "<Conjunction />");
}

Example using strings instead of elements:

var theArray = [
    "<FilterGroup />",
    "<FilterGroup />",
    "<FilterGroup />",
    "<FilterGroup />"
];
for (let i = theArray.length - 1; i > 0; --i) {
    theArray.splice(i, 0, "<Conjunction />");
}
console.log(theArray);

Richard Roncancio · Accepted Answer · 2018-12-20 16:14:21Z

0

You can perform a reduce operation to include the Conjunction component after the FilterGroup component:

filterGroups.reduce(function (acc, element, index, array){
    if(idx < array.length - 1) {
        return acc.concat([element, <Conjunction key={index + 1} />]);
    } else {
        return acc.concat([element])
    }
}, []);

But I must admit that this looks a bit weird, maybe you want to do that when you are iterating on the data array when creating the filterGroups array.

answered Dec 20, 2018 at 16:14

Richard Roncancio

614 bronze badges

Collectives™ on Stack Overflow

How to insert an element in a array of ReactJS component objects (between existing elements)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related