MGC-JUL-24 | PRISCILLA MAC-GATUS|TASK-TRACKER|WEEK1

[Priscilla-MacGatus]

[X ] I have committed my files one by one, on purpose, and for a reason
[X ] I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
[X ] I have tested my changes
[X ] My changes follow the style guide
[X ] My changes meet the requirements of this task

[aniolg]

Hey @Priscilla-MacGatus 👋,

Thanks for submitting your PR! Looks really well, and you demonstrated that you can start to create React projects.

Some general tips:

Delete the comments: Try to have a clean code without parts commented when you do a commit. Only keep it when you need to describe something that is not implicit in the code.

Please use descriptive commit messages, so it's clear what you did in the commit.
We can discuss these points in the next class!

Keep going strong 👍

[aniolg]

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:

Suggested change

	key={index}
	key={`${listItem.ProjectTask}-${index}`}

[Priscilla-MacGatus]

Thank you for the feedback and insight on why indexing might not ALWAYS be the best way.

[aniolg]

Could be better to add .vscode/ directory to .gitignore file on this repository, to not expose your VS Code configuration.

[Priscilla-MacGatus]

Could you please explain further?

[aniolg]

.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.

And .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.

So my point is that you should include the .vscode/ directory to the .gitignore file for avoid have .vscode/ directory in your public repository.

💡 You can find how to do it in the GitHub documentation.

However, don't worry about it. We can review it in the next class.

[aniolg]

I think that you don't need this div. It is what we call a boilerplate: It is repeated, and it lacks any porpoise.
So for better reading and clean code, it is better to remove it.

[aniolg]

The status element it is a text badge and is not interactive, so could be better to be replaced by a div or span tag.

Suggested change

	<button className={colorState()}>{props.ProjectStatus}</button>
	<div className={colorState()}>{props.ProjectStatus}</div>

[aniolg]

You can directly use icons inline. As it's always the same icon we expect here, you do not need to pass it as a prop.

You can easily use icons this way:

const MyIcon = () => (...);

This creates a React component that returns your Icon that you can use instead of . You can easily get the SVG for your icons from Figma (right-click on the Icon and select Copy/Paste as > Copy as SVG).

💡 It's recommended to use SVGO or similar tools to minify the SVG and keep it as small as possible.

[Priscilla-MacGatus]

Thank you for your feedback.Let me go through it quickly and make the changes.

[Priscilla-MacGatus]

I have made the changes and updated it