For A5, you'll be building a React App that utilizes conditional rendering and the concept of lifting state up.
Sam is trying to build a system to search through his friends list on SamBook, a new social media platform that he built.
For this search engine, you'll be entering a search query and maintaining two separate components: the first shows all results that contain the search query, and the second shows all OTHER results (i.e. all results that don't contain the search query).
In App.tsx, initialize a state variable that contains the search query. Also, create an input field that interacts with this state variable.
Create a state variable that contains Sam's friends list. For simplicity,
you can assume friends are just their name with type
another input field and a button associated with it to add a name to
Sam's list. Do not display the list in this component; we will be passing
it down to child components.
Create two components:
Other.tsx. The first one
will display a list of all of Sam's friends who have the search query
as a substring of their name (ignore capitalization). The second one
will display all the other friends.
Use conditional rendering to account for the case in which the filtered list is empty. Display a message such as "No friends found" if the filtered list in either component is empty.
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.