How to map the first object in an array in react?

Question

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

const tabs = [
    {
        index: 0,
        title: 'v1',
        path: '/v1',
        component: versionManager,
    },
    {
        index: 1,
        title: 'v2',
        path: '/v2',
        component: version2Manager,
    },
    {
        index: 0,
        title: 'v3',
        path: '/v3',
        component: 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}
                             component={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}
                 component={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.

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, Aug 17 '21 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, Aug 17 '21 at 17:49
Does this answer your question? [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Emile Bergeron, Aug 17 '21 at 18:04

score 6 · Accepted Answer · answered Aug 17 '21 at 17:46

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}
                 component={Link}
                 to={tabs[0].path}
              />
                )
 }

score 3 · Answer 2 · answered Aug 17 '21 at 17:47

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.

score 2 · Answer 3 · answered Aug 17 '21 at 17:56

2

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}
              component={Link}
              to={item.path}
              />);
     }
      } else {
         return (
         <Tab
          label={tabs[0].title}
          key={tabs[0].index}
          component={Link}
          to={tabs[0].path}
         />)
}

answered Aug 17 '21 at 17:56

Mefit Hernandez

21
1

actually putting the if above the mapping doesn't work. Do you know how to make this work – Steve Aug 17 '21 at 19:23
@steve maybe I have a typo there, but it should work because the Auth verification does not depend on the tabs array. If the map never runs it can be because the role is not Role1. – Mefit Hernandez Aug 18 '21 at 20:06

How to map the first object in an array in react?

3 Answers3