Links NavLinkContainer.jsx

20% Statements 2/10

0% Branches 0/6

0% Functions 0/4

22.22% Lines 2/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34  
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
  import { cloneElement, useState } from "react";
import PropTypes from "prop-types";
 
const NavLinkContainer = ({ listOfLinks, linkActiveFunc }) => {
  const [activeLink, setActiveLink] = useState(null);
 
  const toggleActive = (idx, disabled) => {
    if (disabled || linkActiveFunc) return;
    setActiveLink(idx);
  };
 
  return (
    <nav>
      <ul>
        {(listOfLinks || []).map((link, idx) => (
          <li
            key={idx.toString()}
            onClick={() => toggleActive(idx, link.props.disabled)}
          >
            {cloneElement(link, { isActive: activeLink === idx })}
          </li>
        ))}
      </ul>
    </nav>
  );
};
 
NavLinkContainer.propTypes = {
  listOfLinks: PropTypes.array,
  linkActiveFunc: PropTypes.func,
};
 
export default NavLinkContainer;