dropdown-exercise.jsx

/* 

  Consider the different contexts in which you might use this dropdown and what changes might be necessary to make it more flexible.
  //Answer: I would consider using React Hooks (I think Hooks makes it more readable and manageable), also in it will be more flexible to implement Redux in the future.
  
  Follow up question
  //Answer: this would be included in DropdownItem Component and wrapped within componentDidMount() life cycle method

 */

import React, { PureComponent } from "react";

class Dropdown extends PureComponent {
  constructor(props) {    //typo here
    super(props);
    this.state = {
      isOpen: false,
    };
  }

  
  toggle = () => {      
    const { isOpen } = this.state;
    this.setState({ isOpen: !isOpen }); // '!' added to make it toggle
  }

  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}  //typo
          onClick={this.toggle}
        >
          {label}
        </button>
  
    {/*toggle the dropdown without using className*/}
        {
            this.state.isOpen ? 
            (<ul  aria-labelledby="dropdownButton" role="menu">     
                {this.props.children}         
            </ul>):
            (null)
        }   

      </div>
    );
  }
}

class DropdownItem extends PureComponent {
  // this is where app.sync would be included
  render() {
    return (
      <div>
        <a href={this.props.href}>{this.props.children}</a> 
      </div>
    );
}

class ExampleNav extends PureComponent {
  render() {
    return (
      <nav>
        <Dropdown label='More items'>
          {/* Page 1 was moved in here */}
          <DropdownItem href='/page1'>Page 1</DropdownItem>  
          <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>
    );
  }
}

export default ExampleNav; //exporting