For A5, you'll be building a React app that utilizes conditional rendering and the concept of lifting state up.
In this project, we'll be building a searchable or filterable grocery list that maintains a list of items, each with its own metadata. This metadata simply consists of the name of the item, as well as its price. The app is composed out of a few components: one that maintains each grocery item itself, one that renders the list of grocery items, and one that acts as a search bar for us to filter and search through our list of items, rerendering the list of grocery items. There will also be some helper text depending on the state of items in the grocery list. You will need to use lifting state up and conditional rendering in order to accomplish all of this.
Here is a GIF showing the final functionality of the app:
Part 1 -
In App.tsx, we will have two states, as well as a type definition to be exported
to other components. Let's start with the type definition. We want to make a type
for each item's metadata (remember, each item has a string name and a price that
is a number). When you define this, make sure to put the
export keyword before
the type definition so that you can import it in other components that need to use it.
Next, create the two states, each of which will be lifted up from a child component. The first state should represent all of the items (metadata) on the list, and the second should keep track of the current search query string. Do not display the list in this component; we will be passing it down to a child component.
Part 2 - Lifting State Up
Create two components:
AddItemBar.tsx. The first one
will have an
<input> field representing the search bar, and will need to lift
the value of the input up into the
App.tsx parent. The second one will have two
input fields: one for the name of the item, and the second for the price, as well
as a button to actually submit the data in the two fields to the list. The button
onClick prop will be useful for implementing this, as well as maintaining two
internal states for the name and price values in
Once you've created these child components, add them to
App.tsx and supply them
with the necessary props. Assuming you've lifted state up correctly from them, you
can now make use of the search query and the list of item metadata in order to
render a filtered list based on the query.
When working with HTML
<input> tags, you can specify the
type property to be
'number' if the input field corresponds to a numerical input.
Part 3 - Render the Grocery List
Create a new component called
GroceryList.tsx. This should display the list in
a similar way as the songs list from Assignment 4, but should be made up of the items
that have the search query as a substring of their name
(hint). It should also show each
item's name and price. You can format it as in the GIF.
Part 4 - Conditional Rendering
Use conditional rendering to handle two cases: first, if there are no grocery items in the list, render some text that tells the user that the list is empty. Otherwise, don't display anything. Second, if the search query didn't match any of the items in the list, make sure to render a message saying that the item could not be found.
Part 5 (Optional): Input Validation
You can perform input validation on the
onClick event of our add item button
by making sure that the name is not the empty string and the price is positive.
This is seen in the demo, and implemented using an
alert() function call to
alert the user. (Note: generally, we avoid using
alert() in actual production-level
apps, since it can be annoying and look like spam. If this were a more professional
app, we would use some notification UI such as toasts.)
Submit to CMS a zip file of everything in your project (
create-react-app) directory but remove node_modules . Failure to remove
node_modules will result in a 10 point deduction.
Does my app need to look exactly like what the GIF shows?
No, you're free to make your UI as pretty or as ugly as you want, as long as the functionality is there.
How do I get the type for the callback function when lifting the state up from the child components?
You can mouse over the type (using VS Code) of the setter function in the
hook for the state you want to lift up into the
App.tsx. This way, you can use
it in the prop type for each of the child components that need it.
Getting a weird error with my items state in the
Unfortunately, TypeScript can't infer the type of your state if you set the initial
value to simply
, and it assumes that it's just a falsy value. To fix this,
make sure to parametrize the
useState hook using the type definition you created;
const [state, setState] = useState<myType>().