Question: Let's say there exists an array of keys:

```
[ "link1", "link2", "link3" ]

```

and there is a JSON object called links that is in the following format:

```
{
  "link1": "https://google.com/",
  "link2": "https://facebook.com/",
  "link3": "https://stackoverflow.com/"
}

```

I'm currently working on a React project to practice my JS, and in this project, I needa figure out how to print out these as anchor tags, separated by commas besides for the last element. The desired output for the example would be something along these lines:

```
link1, link2, and link3

```

Except they would be anchor tags correlating to the proper links. How would you recommend I approach this problem?

Edit:
Currently this is my approach: 

```
return links.map((key) => {
  return (
    <span><a href={this.props.content.links[key]} key={key}>{key}</a></span>
  )
})

```

So far, it's returning them like Link1Link2Link3 (as expected). To clarify my question. I'm just looking for a pointer on if there's any methods or whatnot that would make it possible to detect if the key that I'm on is the last key in the array.

Answer: 
When mapping an array in JS, it is possible to simultaneously access the index. You simply need to pass a function `(key, index) => ...` instead of only asking for the key. If the current index is equal to the length of the array minus 1 (because indices start from 0), you are on the last element of the array.

Here's an example:

```
const arr = ["foo", "bar", "baz"]
const result = arr.map((x, i) => i === arr.length - 1 ? "Hello" + x : x)

console.log(result) // => ["foo", "bar", "Hello baz"]

```
You can use css:

(I used scss, but can be with css too)

```
  span {
    &::after {
      content: ', ';
      display: inline-block;
    }
    &:nth-last-child(2)::after {
      content: ' and ';
    }
    &:nth-last-child(1)::after {
      content: '';
    }
  }

```

See example: <https://jsfiddle.net/maniator/oqrw2ukh/>