React - Set default attribute while using map()

Question

I want to render tabs that I stored in an array and set the first tab in the array as default.

Not using an array, it would look kind of like this:

<Tab
   name={"first tab"}
   default
/>
<Tab
   name={"second tab"}
/>

But now since I'm using an array and mapping through it, I'm wondering how i can set the default attribute for the first tab.

This is how the array looks like:

  const tabs = [
{
  name: "first tab",
  
},
{
  name: "second tab",
}]

This is my map function:

    {tabs.map(tab => (
      <Tab
        name={tab.name} />
    )}

Answer 1

The second argument to the callback you pass to map is the index.

The first item will have an index of 0 (which is false).

So capture that and then you can just: default={!index}

Answer 2

map passes your callback the index of the entry as the second argument, so:

{tabs.map((tab, index) => (
    <Tab
        key={tab.name}
        name={tab.name}
        default={index === 0}
    />
)}

Note I've also added a key, since you need that whenever you give an array to React.

Answer 3

Use the array index, the default tab would be index 0, or all truthy indices would not be default.

{tabs.map((tab, i) => (
  <Tab
    key={tab.name}
    default={!i}
    name={tab.name} />
)}