Assignment 4 (due 4/1 3:59 PM on CMS. This is not an April Fool's joke, we swear.)
props, so you can see code like this:
Just calling the input
props is not good for documentation purpose, so we
usually use object destructuring to make it more explicit:
In order for this component to be reused in another file, we need to export it:
React does not care about the arrow function syntax, so you can also write it in function definition syntax:
For this course, we prefer that you use arrow function syntax.
In a React app,
index.tsx is usually the entry point. In the code above, it
renders your component into the DOM element that has id
Imagine you are writing a contacts app and you need to implement an editor.
Unlike the previous components, you need to maintain state. In React, you will
hooks. Hooks are functions that use state and lifecycle methods inside
functional components. The
useState hook is the hook for maintaining state.
Note that the general naming convention of a hook is
You may want to render a list of
YourAwesomeComponent. Here are some examples
to show how you can achieve this in different ways.
Note that we always need a
key prop. Without this, React will give you
warnings in the console. React needs a unique
key for each item in the list to
help it avoid rerendering everything when only one item in the list changes.
In this particular example, you should only use
name as the key if you know
that the property
name is unique. However, if there are multiple objects with
the same name in the list that are used as a key, it would confuse React.