Solution by JPodgrodzki · Pull Request #2032 · mate-academy/react_static-list-of-posts

JPodgrodzki · 2025-08-18T13:52:55Z

No description provided.

mateacademy-ai-mentor

Review Summary

There are several critical blockers that must be addressed before this submission can be approved:

Incorrect Property Names in Data and Types
- Throughout your code (in App.tsx, PreparedPost.ts, and PostInfo.tsx), you use foundUser and foundComments instead of the required user and comments properties. This directly violates the requirement: "The data for posts must be prepared by adding a user and comments to each post." It will break component expectations and cause test failures.
- How to fix: Rename all instances of foundUser to user and foundComments to comments in your data preparation, types, and component props.
Improper Use of key Prop in Info Components
- In both CommentInfo.tsx and PostInfo.tsx, you set the key prop in the child (Info) component. The checklist explicitly states: "The key prop must not be specified in the child component." This can cause rendering bugs and will break tests.
- How to fix: Remove the key prop from the root element of your Info components. Ensure key is only set in the parent component when mapping over lists.
Styles Not Fully Migrated from App.scss
- App.tsx still imports App.scss, which violates the requirement to move styles to component-specific files (e.g., PostList.scss).
- How to fix: Move all relevant styles from App.scss to the appropriate component .scss files and remove the import from App.tsx.
Prop Naming in List Components
- The prop passed to PostList is named preparedPosts, but the requirements and tests expect posts.
- How to fix: Rename the prop to posts in both the parent and the PostList component.
String Interpolation in JSX
- In PostInfo.tsx, you concatenate strings in JSX instead of using string interpolation, which is required by the checklist.
- How to fix: Use template literals or direct interpolation inside your JSX tags.

Next Steps:

Address all the above issues, making sure to update property names, remove improper key usage, migrate styles, and fix prop naming and string interpolation.
Double-check that all requirements and checklist items are satisfied, as these issues are likely to cause test failures.

You're on the right track with your component structure and type usage—just make these critical adjustments and you'll be set! If you have questions about any of the requirements, feel free to ask for clarification.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2025-08-18T13:57:35Z

+
+  return {
+    ...post,
+    foundUser,


This violates the requirement: 'The data for posts must be prepared by adding a user and comments to each post.' You are adding foundUser and foundComments instead of user and comments.

mateacademy-ai-mentor · 2025-08-18T13:57:36Z

+  return {
+    ...post,
+    foundUser,
+    foundComments,


This violates the requirement: 'The data for posts must be prepared by adding a user and comments to each post.' You are adding foundUser and foundComments instead of user and comments.

mateacademy-ai-mentor · 2025-08-18T13:57:36Z

@@ -1,106 +1,27 @@
 import React from 'react';
-
 import './App.scss';


This violates the checklist item: 'Styles from App.scss must be moved to separate files corresponding to components (e.g., PostList.scss).' You are still importing App.scss here.

What about:
iframe {
display: none;
}

.App__title {
text-align: center;
}
in App.scss? its mandatory to maintain the look, but it can't be moved to any other component

mateacademy-ai-mentor · 2025-08-18T13:57:36Z

-        </div>
-      </div>
-    </div>
+    <PostList preparedPosts={preparedPosts} />


This violates the checklist item: 'List components must take an array of corresponding objects and render one Info component per object.' The prop name preparedPosts may not match what PostList expects (likely posts). Double-check prop naming for consistency with requirements and tests.

mateacademy-ai-mentor · 2025-08-18T13:57:36Z

+
+export const CommentInfo: React.FC<Props> = ({ comment }) => {
+  return (
+    <div className="CommentInfo" key={comment.id}>


This violates the checklist item: 'The key prop must not be specified in the child component.' The key should be set in the parent component when mapping, not here in the Info component.

mateacademy-ai-mentor · 2025-08-18T13:57:36Z

+        <h3 className="PostInfo__title">{post.title}</h3>
+
+        <p>
+          {' Posted by  '}


This violates the checklist item: 'String interpolation must be used inside tag content instead of concatenating with {} and spaces.' You should use string interpolation directly in the tag content for 'Posted by'.

mateacademy-ai-mentor · 2025-08-18T13:57:36Z


-export const PostList: React.FC = () => <>Put the list here</>;
+type Props = {
+  preparedPosts: PreparedPost[];


This violates the checklist item: 'List components must take an array of corresponding objects and render one Info component per object.' The prop should likely be named posts instead of preparedPosts to match requirements and tests.

mateacademy-ai-mentor · 2025-08-18T13:57:37Z

+  preparedPosts: PreparedPost[];
+};
+
+export const PostList: React.FC<Props> = ({ preparedPosts }) => (


This violates the checklist item: 'List components must take an array of corresponding objects and render one Info component per object.' The prop should likely be named posts instead of preparedPosts to match requirements and tests.

mateacademy-ai-mentor · 2025-08-18T13:57:37Z

+import { Comment } from './Comment';
+
+export type PreparedPost = Post & {
+  foundUser: User | null;


This violates the requirement: 'The data for posts must be prepared by adding a user and comments to each post.' The properties should be named user and comments, not foundUser and foundComments.

mateacademy-ai-mentor · 2025-08-18T13:57:37Z

+
+export type PreparedPost = Post & {
+  foundUser: User | null;
+  foundComments: Comment[];


This violates the requirement: 'The data for posts must be prepared by adding a user and comments to each post.' The properties should be named user and comments, not foundUser and foundComments.

mateacademy-ai-mentor

Review Summary

All core requirements and checklist items are fully met. Your implementation correctly prepares and renders the posts with their associated users and comments, uses the required component and styling structure, and follows all technical and code style constraints. There are no critical or blocking issues—everything is clean, modular, and testable. Great job addressing all previous feedback and demonstrating strong attention to detail! Keep up the excellent work.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Rate AI review example ↩

Solution

c87613b

mateacademy-ai-mentor suggested changes Aug 18, 2025

View reviewed changes

Second solution

de46ce7

JPodgrodzki requested a review from mateacademy-ai-mentor August 18, 2025 14:21

mateacademy-ai-mentor approved these changes Aug 18, 2025

View reviewed changes

		@@ -1,106 +1,27 @@
		import React from 'react';

		import './App.scss';

Uh oh!

Conversation

JPodgrodzki commented Aug 18, 2025

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants