react js array map function to render different view on size of array length

Question

I have list item which shows some data what I want to do is if array length greater than 10 I wanna get first 10 element of subzonemenus.ItemList then map if and add end of li one more 1 li element so total li element will be 11. but if subzonemenus.ItemList array length is not greater than 10 than return how many li it has and last li will not be added. I hope I am clear

 <div className="row">
    {megamenu != null && megamenu.list.map((subzonemenus, idx) => (
      <div className="col" key={idx}>
       <Link to={`${process.env.PUBLIC_URL}/abcde`} className="nolink">{subzonemenus.Title}</Link>
          <ul className="submenu">
          {
            subzonemenus.ItemList.lenght > 10 ?
            //get first 10 element of subzonemenus.ItemList then map it so if length > 10 will show only first 10 element of array
            subzonemenus.ItemList != null && subzonemenus.ItemList.map((menuItemlist, idx) => (
              <li key={idx}><Link to={menuItemlist.Path}>{menuItemlist.MenuItemText}</Link></li>
            )) 
            // if length greater than 10 then will add end of li this li to "show all"
            <li key={idx}><Link to={menuItemlist.Path}>{menuItemlist.ShowAll}</Link></li>
            // else length  is not greater than 10 then last li will not be added
            :
            subzonemenus.ItemList != null && subzonemenus.ItemList.map((menuItemlist, idx) => (
              <li key={idx}><Link to={menuItemlist.Path}>{menuItemlist.MenuItemText}</Link></li>
            )) 
          }
        </ul>
       </div>
     ))}
</div>

Please edit the question and describe (a) what you want to achieve and (b) how your current code fails to achieve that goal. Both are needed, and both are missing or at least unclear. Also, your code will be a lot more readable if you don't indent it with dozens of spaces. — Peter B
– Peter B, Commented Jun 9, 2021 at 7:51
I've edited the post can you take a look again I dont think my code is clear so wanna get someone to code it in a good way :) — mrtyvz61
– mrtyvz61, Commented Jun 9, 2021 at 8:07

Rajdeep D · Accepted Answer · 2021-06-09 08:22:13Z

Please check this, I have tried to answer this based on my understanding. Looks like your code requires some modification. Like you need not explicitly check != null, because if a variable is null it will evaluate to false and the and operation will return false without moving further.

I have moved the logic related to li to a new method renderItems

You can slice(0,10) the array to get first 10 elements, for less elements, it will return all the elements.

Then a ternary for 'show all', if length greater than 10 the show all will be added else nothing.

const renderItems = (itemList) => {
  let list = itemList.slice(0,10).map((menuItemlist, idx) => (
                                                        <li key={idx}><Link to={menuItemlist.Path}>{menuItemlist.MenuItemText}</Link></li>
                                                    )) ;

 if(itemList.length > 10) 
     list.push(<li key={10}><Link to={itemList[10].Path}>{itemList[10].ShowAll}</Link></li>);

  return list;
}

{megamenu && megamenu.list 
&& megamenu.list.map((subzonemenus, idx) => (
                                    <div className="col" key={idx}>
                                        <Link to={`${process.env.PUBLIC_URL}/abcde`} className="nolink">{subzonemenus.Title}</Link>
                                        <ul className="submenu">
                                         {
                                              subzonemenus.ItemList && renderItems(subzonemenus.ItemList);
                                            }
                                        </ul>
                                    </div>
                                ))}

Habibullah Rezaie · Accepted Answer · 2021-06-09 08:15:44Z

1

You have a typo here:

subzonemenus.ItemList.lenght > 10 ?

change the .lenght to .length

answered Jun 9, 2021 at 8:15

Habibullah Rezaie

3373 silver badges8 bronze badges

Collectives™ on Stack Overflow

react js array map function to render different view on size of array length

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related