I am mapping an array of object in react. The array is as follows

const tabs = [
    {
        index: 0,
        title: 'v1',
        path: '/v1',
        ponent: versionManager,
    },
    {
        index: 1,
        title: 'v2',
        path: '/v2',
        ponent: version2Manager,
    },
    {
        index: 0,
        title: 'v3',
        path: '/v3',
        ponent: version3Manager,
    },
];

I have successfully mapped the entire array with this

{tabs.map((item) => {
           if (auth.verify(Roles.role1)) {
                   return (
                        <Tab
                             label={item.title}
                             key={item.index}
                             ponent={Link}
                             to={item.path}
                         />
                    );

but I would like to add an else that only maps the first object (v1) and all of its elements, something similar to this.

} else {
       return (
             <Tab
                 label={item.title}
                 key={item.index}
                 ponent={Link}
                 to={item.path}
              />
                )
 }

I have tried thing such as item.title[0], item.index[0] ,etc.... but it gives an undefined error every time. Does anyone know the best way to only map the first object in the else statement? Thanks in advance.

I have seen Get first object from array of objects in react but this didn't seem to be helpful in my case.

I am mapping an array of object in react. The array is as follows

const tabs = [
    {
        index: 0,
        title: 'v1',
        path: '/v1',
        ponent: versionManager,
    },
    {
        index: 1,
        title: 'v2',
        path: '/v2',
        ponent: version2Manager,
    },
    {
        index: 0,
        title: 'v3',
        path: '/v3',
        ponent: version3Manager,
    },
];

I have successfully mapped the entire array with this

{tabs.map((item) => {
           if (auth.verify(Roles.role1)) {
                   return (
                        <Tab
                             label={item.title}
                             key={item.index}
                             ponent={Link}
                             to={item.path}
                         />
                    );

but I would like to add an else that only maps the first object (v1) and all of its elements, something similar to this.

} else {
       return (
             <Tab
                 label={item.title}
                 key={item.index}
                 ponent={Link}
                 to={item.path}
              />
                )
 }

I have tried thing such as item.title[0], item.index[0] ,etc.... but it gives an undefined error every time. Does anyone know the best way to only map the first object in the else statement? Thanks in advance.

I have seen Get first object from array of objects in react but this didn't seem to be helpful in my case.

• javascript
• reactjs

• It's unclear how your use-case is different from the question you linked. It's also unclear what's the current result and what's the actual result you'd like to have. What's the condition? Would both the array or the single element be used? – Emile Bergeron Commented Aug 17, 2021 at 17:45
• Why not split your array into two or more. you can use a .filter to filter out any thing. for example tabs.filter(tab => tab.title === 'v3').map((item) => { /* do jsx things here? */ }); – Jessy Commented Aug 17, 2021 at 17:49
• Does this answer your question? How can I access and process nested objects, arrays or JSON? – Emile Bergeron Commented Aug 17, 2021 at 18:04

3 Answers 3

item.title[0], item.index[0] won't work because item is only an object from the tabs array. What you want is:

} else {
       return (
             <Tab
                 label={tabs[0].title}
                 key={tabs[0].index}
                 ponent={Link}
                 to={tabs[0].path}
              />
                )
 }

You want to get the first element of the tabs array, but you've been trying to access the first element of the properties of the array as if the properties are arrays themselves, and tabs is just a regular object.

So you'd want to use tabs[0].title, tabs[0].index, etc.

Map always iterates over all of the items of the array. Another way you can try is to first check if the user has the role you need. If not, just return the first tab.

  if(auth.verify(Roles.role1)){
    return tabs.map((item) => {
      return (<Tab
              label={item.title}
              key={item.index}
              ponent={Link}
              to={item.path}
              ​/>);
     }
      } else {
         return (
         <Tab
          label={tabs[0].title}
          key={tabs[0].index}
          ponent={Link}
          to={tabs[0].path}
         />)
}