test drop down

gistfile1.txt

/*
The bug was aria-expended instead of aria-expanded and the toggle function should reverse the value of isOpen state.
i would improve it by destructuring the props children.
to sync this dropdown selection to the server app.sync should be at getDerivedStateFromProps()
*/

import React, {PureComponent} from 'react';

class Dropdown extends PureComponent {
  constuctor(props) {
    super(props);
    this.state = {
      isOpen: false,
    };
  }

  toggle() {
    const {isOpen} = this.state;

    this.setState({isOpen: !isOpen});
  }

  render() {
    const {isOpen} = this.state;
    const {label, children} = this.props;

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

        <ul className={`${isOpen ? 'dropdown-open' : ''} dropdown-menu`} aria-labelledby="dropdownButton" role="menu">
          {children}
        </ul>
      </div>
    );
  }
}

class DropdownItem extends PureComponent {
  render() {
  const {href, children} = this.props;
  return (    <li><a href={href}>{children}</a></li>  )
  }
}

class ExampleNav extends PureComponent {
  render() {
    return (
      <nav>
        <a href="/page1">Page 1</a>
        <Dropdown label="More items">
          <DropdownItem href="/page2">Page 2</DropdownItem>
          <DropdownItem href="/page3">Page 3</DropdownItem>
          <DropdownItem href="/page4">Page 4</DropdownItem>
        </Dropdown>
        <Dropdown label="Even more items">
          <DropdownItem href="/page5">Page 5</DropdownItem>
          <DropdownItem href="/page6">Page 6</DropdownItem>
        </Dropdown>
      </nav>
    );
  }
}