JSX map only the first object in array

Question

I'm curious on how to only render the first object in an array using .map in JSX.

{this.state.data.map(data =>
    <span className="fooBar">
        <a href={data.foo}>{data.bar}</a>
    </span>
)}

Thank you!

Answer 1

The easiest solution would be to just not use .map at all!

<span className="fooBar">
    <a href={this.state.data[0].foo}>{this.state.data[0].bar}</a>
</span>

.map will always go over every object in an array - there's no way to break out of it early.

Answer 2

Map is designed to call every element in an array applying a transformation.

If you just want to render the first then you'd be better to either explicitly call the first element this.state.data[0] or use a library that supports a method like head.

Lodash Example

const link = _.head(this.state.data);
<span className="fooBar">
  <a href={link.href}>{link.title}</a>
</span>