Chameleon React Developer technical exercise

dropdown.jsx

/* 

Prompt:
  We have defined a basic dropdown via the Dropdown and DropdownItem components below, with example usage
  in the ExampleNav component. The Dropdown and DropdownItem components have some problems, and also 
  have room for improvements (doesn't everything?) A couple items TODO here (make sure to explain with comments!)
  
  0. How are you today? 😊
  1. Please fix any obvious issues you see with the dropdown.
  2. Please then make improvements to the dropdown.
  3. Consider the different ways that this dropdown might be used and what changes would
     be neccessary to make it more flexible.
  4. If we wanted to sync this dropdown selection to the server with
     app.sync('PATCH', 'user', { dropdown_1_state: {true,false} }) where would this be included?
  5. If we wanted to pass children (like this example) OR a Promise that resolves to an array of items
     what changes should be made? (just a sentence or two or some code is ok).
  
  PS: No need to worry about CSS.

 */
// The 4th question is very confusing, as there is no real explanation on how it works.
// I am assuming it somehow syncs the isOpen state from the dropdown with the server

import React, {PureComponent} from 'react';

class Dropdown extends PureComponent {
  // Fix typo on constructor name
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
    };
    
    // Code that I don't understand, maybe have to remove
    app.sync('PATCH', 'user', { dropdown_1_state: {true,false} })
    
    // Binding the toggle method so the `this` keyword is bound to the component
    this.toggle = this.toggle.bind(this)
  }

  toggle() {
    const {isOpen} = this.state;
    // Toggling the state as recomended by the React documentation
    this.setState((prevState) => ({
      isOpen: !prevState.isOpen
    }));
  }

  render() {
    const {isOpen} = this.state;
    const {label} = 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">
          {this.props.children}
        </ul>
      </div>
    );
  }
}

class DropdownItem extends PureComponent {
  render() {
    // Returning an anchor tag with href and content from children
    return <a className="dropdown-item" href={this.props.href}>{this.props.children}</a>;
  }
}

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>
    );
  }
}