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 install
, which installs dependencies for the project - Finally, type
npm run start
, 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.js
only.
- Set state using
useState
andintialEmails
- Render a list of emails from state so it looks similar to the screenshot above.
- You can find an HTML template for each email in the templates folder
- 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