map으로 배열의 마지막 요소에만 속성 다르게 주기

.map 을 사용하여 컴포넌트를 만드는데

마지막 컴포넌트만 다른 속성값을 주고 싶었다.

 

마지막 요소에만 유일하게 href값이 있었고, 새 창에서 띄워야 했기때문이다..

const MenuContent = [
    {
      menuName: 'Overview',
    },
    {
      menuName: 'Features',
    },
    {
      menuName: 'References',
    },
    {
      menuName: 'Release Note',
      href: 'DeepCatchReleaseNote',
    },
  ];

 

Array.length === index + 1 로 배열의 마지막 요소에 접근해서 

컴포넌트를 따로 출력했다. 

{MenuContent?.map((item, index) => {
              if (MenuContent.length === index + 1) { //마지막으로 출력할 컴포넌트 조건
                return (
                  <>
                    <Link
                      target="_blank"
                      href={isKRPage ? `/KR/${item.href}` : item.href}
                      onClick={() => setCurrentMenu(`${item.menuName}`)}
                      className={`${
                        currentMenu === `${item.menuName}` ? 'text-white' : 'text-txt_color2'
                      } font12_EN md:base_EN xl:font18_EN mr-[20px] block hover:text-white md:mr-[20px]  xl:mr-[40px]`}
                      rel="noreferrer"
                    >
                      Release Note
                    </Link>
                  </>
                );
              }
              return (
                <li className="mapComponent" key={index}>
                  <Link target="_blank" href={isKRPage ? `/KR/${item.href}` : `#${item.menuName}`}>
                    <a
                      onClick={() => setCurrentMenu(`${item.menuName}`)}
                      className={`${
                        currentMenu === `${item.menuName}` ? 'text-white' : 'text-txt_color2'
                      } font14_EN lg:base_EN xl:font18_EN mr-[20px] block hover:text-white md:mr-[20px] xl:mr-[40px]`}
                    >
                      {item.menuName}
                    </a>
                  </Link>
                </li>
              );
            })}