class-jul2024-1 / Kostiantyn Kovalchuk / Task-tracker challenge #4
Conversation
There was a problem hiding this comment.
Hey @kostiantynkovalchuk 👋,
Thanks for submitting your PR! Looks really well, and you applied right all the concepts of the last class. 🥇
If you want to improve it, you can try to apply the colors on the status badge or set icons on date/designers cells, to being more accurate on the Figma example.
See you in the next class!
Keep going strong 👍
.vscode/settings.json
Outdated
There was a problem hiding this comment.
.vscode/ is a directory created by the VS Code application to store configurations. In that case, is keeping the settings at repository level. So in general, it's something you would rather not include in your public repository.
Could be better to add .vscode/ directory to .gitignore file on this repository.
(FYI: .gitignore is a file located in the root of the repo, where you can specify which files or directories want to be ignored by git when you do your commits.)
💡 You can find how to do it in the GitHub documentation.
| <ul> | ||
| {taskItems.map((task, index) => ( | ||
| <TaskItem | ||
| key={index} |
There was a problem hiding this comment.
I would recommend that you not use only the index as key when you are rendering a list on React because if in the future you will edit that list, you can create confusing errors.
ℹ️ You can find deeply explanation on the Rendering List article of Rect documentation
✨ Tip: In an ideal scenario, in the data of your item, you will have a unique id/sku/... that you can use as a key. If this is not your case, you can concatenate the index with a probably unique value of your data (like the name), like the below example:
|
Got it. Thank you!
…On Sat, 8 Feb 2025 at 10:05, Aniol Gómez ***@***.***> wrote:
***@***.**** commented on this pull request.
------------------------------
In web/src/components/domains/task/TaskList/TaskList.jsx
<#4 (comment)>
:
> -Please make sure to add styles using CSS Modules.
-Create a taskItems array and return a list of <TaskItem /> components.
-*/
-
-export function TaskList() {
- // create some task items here and return one task list for each item you have
- const taskItems = [];
-
- return <div className={styles.listWrapper}></div>;
+export function TaskList({ taskItems }) {
+ return (
+ <div className={styles.listWrapper}>
+ <ul>
+ {taskItems.map((task, index) => (
+ <TaskItem
+ key={index}
I would recommend that you not use only the index as key when you are
rendering a list on React because if in the future you will edit that list,
you can create confusing errors.
ℹ️ You can find deeply explanation on the Rendering List article
<https://react.dev/learn/rendering-lists#why-does-react-need-keys> of
Rect documentation
✨ Tip: In an ideal scenario, in the data of your item, you will have a
unique id/sku/... that you can use as a key. If this is not your case, you
can concatenate the index with a probably unique value of your data (like
the name), like the below example:
—
Reply to this email directly, view it on GitHub
<#4 (review)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BKEFHNDKXHPWAPIBI6SBSV32OXCFTAVCNFSM6AAAAABWUYZIUWVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDMMBTGM4TQOBZG4>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
No description provided.