Skip to content

mate-academy/react_static-list-of-todos

Folders and files

NameName
Last commit message
Last commit date

Latest commit

336932e · Sep 10, 2024

History

77 Commits
Sep 10, 2024
Mar 18, 2024
Jul 17, 2024
Jul 2, 2019
Apr 6, 2022
Apr 6, 2022
Jul 17, 2024
Apr 7, 2022
Feb 15, 2024
Feb 15, 2024
Jul 2, 2019
Jul 2, 2019
Apr 6, 2022
Feb 15, 2024
Aug 2, 2022
Jul 17, 2024
Jul 17, 2024
Jul 17, 2024
Jul 17, 2024
Mar 18, 2024
Jul 17, 2024

Repository files navigation

React Static List of TODOs

React + Typescript cheat sheet

You are given todosFromServer and usersFromServer arrays with the required data.

A todos array is based on the todosFromServer, but each todo has a corresponding user attached. In addition, you have the Todo and User interfaces already implemented in ./src/types/.

Split the given App markup into component following the rules:

  • don't change CSS class names, they are used in tests;
  • TodoList takes the todos and renders one TodoInfo per todo in the array;
  • TodoInfo takes a todo and renders its details, including a todo.user with UserInfo component if the todo has a user;
  • make sure that the TodoInfo has a TodoInfo--completed modifier for all completed todos;
  • UserInfo takes a user and renders the details.

Instructions

  • Install Prettier Extention and use this VSCode settings to enable format on save.
  • Implement a solution following the React task guideline.
  • Use the React TypeScript cheat sheet.
  • Open one more terminal and run tests with npm test to ensure your solution is correct.
  • Replace <your_account> with your Github username in the DEMO LINK and add it to the PR description.