technical exercise

trychameleon technical

  ##Refactor the code to use the latest function based components
  import React, {PureComponent} from 'react'; 
  import DropdownItem from "./DropdownItem/DropdownItem";


  function Dropdown(props) {

    const [isOpen, setIsOpen] = React.useState({isOpen: false}); 

    function toggle() {
      setIsOpen(prevIsOpen => prevIsOpen)
    }

    return (
      <div className="dropdown-container">
        <div className="dropdown">
          <button type="button" className="dropdown-button" id="dropdownButton" aria-haspopup="true" aria-expended={isOpen} onClick={toggle}>{props.label}</button>

          <ul className={`${isOpen ? 'dropdown-open' : ''} dropdown-menu`} aria-labelledby="dropdownButton" role="menu">
            {props.children}
          </ul>
        </div>
        
        <nav>
          <DropdownItem href="/page1" value="Page 1"/>
          <Dropdown label="More items">
            <DropdownItem href="/page2" value="Page 2"/>
            <DropdownItem href="/page3" value="Page 3"/>
            <DropdownItem href="/page4" value="Page 4"/>
          </Dropdown>
          <Dropdown label="Even more items">
            <DropdownItem href="/page5" value="Page 5"/>
            <DropdownItem href="/page6" value="Page 6"/>
          </Dropdown>
        </nav>

        
      </div>
    );
  }
  
  export default Dropdown;
  

  import React from "react";

  function DropdownItem(props) {
    return (
      <div>
          <a className="nav-item">{props.value}</a>
      </div>
    );
  }

  export default DropdownItem;

##refactor the code to use React latest function based components
###created a separate component for Dropdown Item, and imported it to Dropdown

pass down the nav item values as props to the Dropdown component, to have a more dynamic codebase