How to skip certain elements when using javascript map()

Question

I currently have this bit of code to split up a string and display it as a list.

<span className="reply">{this.props.message.split("\n").map((chunk) => {
    return <span className="message-chunk">{chunk}<br /></span>
})}

I want to skip the first and last element in the split array because the string is of the form.

Heading\n
List Item\n
List Item\n
List Item\n
Ending\n

Is there a way to do this while using the map function. I saw mention of the filter() function in another related question but I don't think that's applicable here. Any help is appreciated.

Do you mean "skip" as in still return the heading and end but transform everything else, or only return the list items? — VLAZ
– VLAZ, Commented Sep 10, 2016 at 21:37
@user3282276 If one of the answers is correct please mark it as so. If none of them are please provide feedback as to how it does not solve your issue. Thanks — winhowes
– winhowes, Commented Sep 11, 2016 at 21:22

winhowes · Accepted Answer · 2016-09-10 21:33:35Z

8

One option is to just slice the array before you map, so in your case it would be:

this.props.message.split("\n").slice(1, -1).map((chunk) => {
    return <span className="message-chunk">{chunk}<br /></span>
})

Note that this will remove the first and last element from the array. If you are intending to not modify the first or last element I recommend @vlaz's answer :)

edited Sep 10, 2016 at 21:33

answered Sep 10, 2016 at 21:26

winhowes

8,1255 gold badges31 silver badges41 bronze badges

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

1 Comment

Lyubomir Over a year ago

slice doesn't mutate the array, but returns a new one, so this is the best answer.

Kootoopas · Accepted Answer · 2016-09-10 21:47:21Z

1

A pretty clean solution would be to store the line separated array. Then .shift() and .pop() it to trim edges (and store them if you need to), and iterate the trimmed array with .map(). :)

// Example with stored heading and ending
let messageLines = this.props.message.split("\n");
const heading = messageLines.shift();
const ending = messageLines.pop();

// Map whenever you need to
messageLines.map(...);

edited Sep 10, 2016 at 21:47

answered Sep 10, 2016 at 21:40

Kootoopas

661 silver badge7 bronze badges

Comments

VLAZ · Accepted Answer · 2016-09-10 21:48:17Z

1

The callback function for Array.prototype.map will be passed three parameters - the element, the index, and the array. So you can very easily skip the first and last element when transforming

arr.map(function(item, index, list) {
    if(index === 0 || index === list.length -1) {
         return item;
    } else {
        /* transformation logic */
        return transformedItem;
    }

})

edited Sep 10, 2016 at 21:48

answered Sep 10, 2016 at 21:28

VLAZ

29.6k9 gold badges65 silver badges87 bronze badges

2 Comments

winhowes Over a year ago

The problem with this is that the first and last element are still in the returned array

VLAZ Over a year ago

OP said skip them which I took to mean they still need to be returned. Perhaps the requirement is to remove them but it's not totally clear.

Collectives™ on Stack Overflow

How to skip certain elements when using javascript map()

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related