In this exercise, we are going to practice using state.
You'll use state to render a list of emails like in Gmail. Rendering lists is a very common pattern in React.
You'll use state's set
function to modify data and render the new changes.
- Fork this repository
- Clone the forked repository onto your local machines
- In the root directory, type
npm ci
, which installs dependencies for the project - Finally, type
npm run dev
, which starts a development server that runs your website in the browser. That server will reload your website whenever you make any changes to source files
- DO NOT break the code down into components; work in
App.jsx
only. - When you first run the app, there will be no emails displayed. Your task will be to add them in.
- You need to render a list of emails from state so it looks similar to the screenshot above.
- Set state using the
useState
hook and theintialEmails
variable provided for you. - You can find an HTML template for each email in the
src/templates
folder.
- Set state using the
- You can ignore the
Header
component for now - You can use the CSS in
App.css
to help style your list of emails or create your own styles Array.map
is a useful method for rendering lists and modifying state- Remember to use the
key
attribute when rendering lists in react
- Create a
toggleRead
function that updates the target email's read property in state, when a user clicks on the checkbox - Create a
toggleStar
function that updates the target email's starred property in state, when a user clicks on the star - Make sure these changes take effect in the UI
- Get the Hide Read checkbox to work in the
left-menu
section. You'll need to use state to keep track of the changes and you'll need a function to filter the emails before they are rendered ie.getReadEmails(emails)
- Get the
left-menu
inbox and starred menu items to work when clicked. You'll need to use state to keep track of the changes ie.currentTab
and you'll need a function to filter the emails before they are rendered ie.getStarredEmails(emails)
- Replace the hard-coded question marks in the
left-menu