Assignment 8

Submit this assignment in CodeSandbox.

If you're interested in developing with React locally, you are welcome to do that. However, please copy over your code to CodeSandbox, verify that it works as expected, and submit that URL. This makes grading and helping out much easier.

Requirements

Build a reusable component of your choice. Take a look at web applications that you use and see what user interface elements might make for a good reusable component. If you can't think of a reusable component to build, here are some ideas:

  • An accordion
  • A tooltip
  • A Delete button that shows an inline Confirm Delete button when clicked. You could also enhance this so that users must type in a specific string before the Confirm Delete button becomes enabled.
  • Tabs with panels
  • A sortable table
  • A checkbox list (this is similar to the Final Project extra credit 😉)
  • A Reactions component (like on Facebook 👍 ❤️ 😆 😡 😢)
  • A file tree

You must implement the following requirements for your reusable component:

  1. Your component must have at least 1 prop that is called on some user interaction (like onClick, onMouseOver, onSubmit, onKeyUp, onKeyDown, etc).
  2. Your component must provide some flexibility as to what HTML is rendered through at least 1 render prop. The render prop can be a function passed to children.

In the App component, show a few examples of your component in action and include a description for each. For example, if you have a prop that allows you to customize the color, show 2 examples of your component where a different color value was passed into the prop.

Submission

Send an email to me and the TA with your CodeSandbox link. Use "ITP 404 - Assignment 8" as the email subject.