Exercise: Growing up with Looping and PropTypes

1) Replace the <option> tags for the dropdown with your own list.
Hints:
- Create an array of strings. Pass it as a prop into <List />.
- In <List />, turn the array into a list of <option> tags that can be used in the <select> dropdown.
- Replace the <option>Fawkes the Phoenix</option> with your newly created list of <option> items

2) If the list is short, display a message asking for more items. If the list is long, show a message stating how long the list is.
Hints:
- You have several options for how to implement this. You choose:
a) If list is too short return early with only a "List is too short" message. You can do the same if the list is too long. In these cases the only thing visible to user is the message.
b) Assign a "msg" variable. In the template always render the message. Based on array length you can assign different messages to the "msg" variable (before the return statement).
c) Put the message content and length check inside an expression {} in the template.

3) Set up a default value for the prop you set up in step 1)
Hints:
- Review the docs for default values to see what API to use for default values https://reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values 
- set an array as the default value: ["I WANT TO BE ME"]
- verify the default value works by rendering <List /> without any props

4) Set up the following PropTypes for <List />:
- array prop set up in 1) should be an array, and should be required
- "cfg" prop that takes an object with the shape: {color: 'red', size: 10}. This prop is optional.
Hints:
- import propTypes
- Review docs if needed for the API https://reactjs.org/docs/typechecking-with-proptypes.html
- verify via the console that the props throw errors when the wrong types are passed in