Как получить элемент «x» в React JS при использовании объекта карты

#javascript #arrays #reactjs #object

Вопрос:

У меня есть массив с объектами, которые я использую map для отображения элементов на странице, Проблема в том, что я хочу получить последний объект из массива (в моем случае это «документы») и задать для него класс для его стиля, вы также можете увидеть мой код в codesandbox

 export default function Nav() {
  const [navItems] = useState([
    {
      id: 1,
      name: "Home",
      link: "/dashboard"
    },
    {
      id: 2,
      name: "Investments",
      link: "/investments"
    },
    {
      id: 3,
      name: "Organize",
      link: "/organize"
    },
    {
      id: 4,
      name: "Documents",
      link: "/documents"
    }
  ]);
  return (
    <div className="App">
      {navItems.map((i) => {
        return (
          <div key={i.id}>
            <p>{i.name}</p>
          </div>
        );
      })}
    </div>
  );
}
 

Ответ №1:

Проверьте индекс элемента при сопоставлении с ним. И проверьте index , равно ли значение navItems.length - 1 . Проверьте это-

 <div className="App">
  {navItems.map((item, index) => {
    return (
      <div
       key={item.id}
       className={index === navItems.length - 1 ? 'your-desired-class': ''}>
          <p>{item.name}</p>
      </div>
    );
  })}
</div>