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"]

```
JS has the built in function, `array.join()`. It loops through the array, creating a single string of all items, separated by the character used as an argument.

If the arguments are left blank ( `.join()` ), it defaults to a single comma; any string put in the argument will be used (e.g. `.join('-')` or `.join('apple')`.

See my snippet below for it in action:

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

var linksAnchor = []; // Prepare empty array

for (let item in linksObj) {
  // Poplate array with the span and anchors, set to the original object
  linksAnchor.push('<span><a href="' + linksObj[item] + '">' + item + '</a></span>');
}

// Empty (default) join, uses a single comma
document.getElementById('navlistjoin').innerHTML = linksAnchor.join();

// Join using space, comma, then another space
document.getElementById('navlistjoinscs').innerHTML = linksAnchor.join(' , ');

// Join using a dash
document.getElementById('navlistjoindash').innerHTML = linksAnchor.join('-');

// Join using the string 'apple'
document.getElementById('navlistjoinapple').innerHTML = linksAnchor.join('apple');
```

```css
a {
  text-decoration: none;
  color: #FF0000;
}

a:hover {
  text-decoration: underline;
}
```

```html
<h4>.join()</h4>
<nav id="navlistjoin"></nav>
<h4>.join(' , ')</h4>
<nav id="navlistjoinscs"></nav>
<h4>.join('-')</h4>
<nav id="navlistjoindash"></nav>
<h4>.join('apple')</h4>
<nav id="navlistjoinapple"></nav>
```