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!

Solution 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.

Solution 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>

Comments

[budji]

Is it possible to offset this? Like if you want the rest of the data wrapped in a different div for example.

[Joe Clay]

@budji: For the rest of the data, you could just slice the array: this.state.data.slice(1).map(x => ...)

[Anshuman Pattnaik]

Not working still it's this.state.data[0] is undefined

[Joe Clay]

If there is a chance that this.state.data[0] will be undefined, you must handle that in your code.

[Zahid Hassan Shaikot]

I am new in reactjs. how can i use lodash in react.