chameleon.md

/* 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? 😊

Doing okay. :)

1. Please fix any obvious issues you see with the dropdown.

Fixed some typos, structural stuff, exports, class vs 
functional components, etc. I also tried to make it more readable in some spots.

2. Please then make improvements to the dropdown.

I did this as I went along. I just followed your lead and made the links in the
dropdown li elements and made them links, since you were passing them an href.

3. Consider the different ways that this dropdown might be used and what changes would be necessary to make it more flexible.

 I would probably put it in an actual dropdown form so it was controlled. I would also want to use React-Router 
 for these routes (pages).

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?

I didn't know what this referred to, other than an API call, so I googled and it sounds like this might be a call 
to AWS to push that state to the backend/DB?? If that's the case, I think we would want to do that after the user 
clicked on the More Items button?? I would love to learn more about this! 

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).

I guess I might put this into a componentDidMount and hold the array in state. I could also see it being 
conditionally rendered in a separate function.

PS: No need to worry about CSS. -- kthx. */

import React, {PureComponent} from 'react';

class Dropdown extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false
    };
  }

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

    this.setState({isOpen: !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}
                aria-controls="dropdown-menu"
                onClick={this.toggle}
        >
          {label}
        </button>

        {isOpen &&
          <ul className={`${isOpen ? 'dropdown-open' : ''} dropdown-menu`} aria-labelledby="dropdownButton" role="menu">
            {this.props.children.map(child => <li key={child.props.children}>{child}</li>)}
          </ul>
        }
      </div>
    );
  }
}

const DropdownItem = (props) => {
  return (
    <a href={props.href}>{props.children}</a>
  )
}

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

Made some updates to the way the item links are displayed and made them clickable.