CODEWITHSUNDEEP
javascriptreactjsjsx
Farhad.h
Farhad.h

Reputation: 61

Why is Active class not shown correctly in Inspect Element when NavLink is written next to another class name?

import React from "react";
import {NavLink} from "react-router-dom";

const MenuItem = ({items}) => {

  const activeClassMenuItem = ({ isActive }) => (isActive ? "active_link" : "");

  return (
    <>
      {items.map((item) => {
        return (
          <li className="menu-item" key={item.id}>
            <NavLink
              to={item.url}
              className={`menu-link ${activeClassMenuItem}`}
            >
              <div data-i18n={item.title}>{item.title}</div>
            </NavLink>
          </li>
        );
      })}
    </>
  );
};

export default MenuItem;

Show result in inspect element : ( 'active_link' class is also placed)

<li class="menu-item ">
   <a class="menu-link  _ref2 => { let { isActive } = _ref2; return isActive ? "active_link" : "" } active_link" href="/Login">
       Login
   </a>
</li>

When I try from NavLink to have the 'active_link' class next to other classes of that element, unfortunately, the output is not placed correctly in Inspect Element.

Upvotes: 0

Views: 56

Answers (1)

mgm793
mgm793

Reputation: 2066

activeClassMenuItem is a function you need to do it like this (I assume item has a property called isActive):

import React from "react";
import {NavLink} from "react-router-dom";

const MenuItem = ({items}) => {

  const activeClassMenuItem = ({ isActive }) => (isActive ? "active_link" : "");

  return (
    <>
      {items.map((item) => {
        return (
          <li className="menu-item" key={item.id}>
            <NavLink
              to={item.url}
              className={`menu-link ${activeClassMenuItem(item)}`}
            >
              <div data-i18n={item.title}>{item.title}</div>
            </NavLink>
          </li>
        );
      })}
    </>
  );
};

export default MenuItem;

Upvotes: 1

Related Questions