add task solution by naviailpach · Pull Request #4292 · mate-academy/react_decompose

naviailpach · 2026-02-28T14:59:41Z

No description provided.

mateacademy-ai-mentor

Review Summary

You've done a great job setting up the file structure for your components, which is a solid foundation. However, there are a few critical issues that prevent the application from working correctly. All of your child components (Header, Navigation, Welcome, and Article) are missing return statements, which means they don't render any content. Since you're using curly braces {} for your function bodies, you need to explicitly return the JSX.

Additionally, the task requires using export default for all components, but you've used named exports. You'll need to change export const Component = () => ... to const Component = () => ... and then add export default Component; at the end of each component file. Remember to also update the corresponding import statements in App.jsx.

Lastly, there's a typo in the Article component's name (Arrticle), and the responsive CSS for the Header and Article components still needs to be moved from App.css to their respective CSS files. Addressing these points will get your project running as expected!

✨ 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 · 2026-02-28T15:01:36Z

src/App.jsx

+import { Header } from './components/Header/Header';
+import { Welcome } from './components/Welcome/Welcome';
+import { Arrticle } from './components/Article/Article';
+import { Navigation } from './components/Navigation/Navigation';


The task requires all components to use export default. These are named imports (using {}). After you update your child components to use default exports, you'll need to change these imports to the default import syntax (e.g., import Header from './components/Header/Header';).

mateacademy-ai-mentor · 2026-02-28T15:01:36Z

src/App.jsx

-// Move each BEM block to a separate component (file) and import them here
+import { Header } from './components/Header/Header';
+import { Welcome } from './components/Welcome/Welcome';
+import { Arrticle } from './components/Article/Article';


There appears to be a typo in the component name. It should likely be Article instead of Arrticle. You'll need to correct this here, in the component file itself, and where it's used below.

mateacademy-ai-mentor · 2026-02-28T15:01:36Z

src/App.jsx

+      <Welcome />
+      <Header />
+      <Navigation />
+      <Arrticle />


This component name also has the typo (Arrticle). It should be updated to Article after correcting the import and the component file.

mateacademy-ai-mentor · 2026-02-28T15:01:36Z

src/components/Article/Article.css

@@ -1 +1,17 @@
-/* Put article styles here */
+.article {


The responsive styles for the .article class are missing from this file. You should move the @media blocks containing .article rules from src/App.css into this file to keep all component-related styles together.

mateacademy-ai-mentor · 2026-02-28T15:01:36Z

src/components/Article/Article.jsx

+import './Article.css';

-// Create an Article function returning the HTML of article block
+export const Arrticle = () => {


It looks like there's a typo in the component name. It should probably be Article to match the file and directory names.

mateacademy-ai-mentor · 2026-02-28T15:01:36Z

src/components/Header/Header.jsx

+import './Header.css';

-// Create a Header function returning the HTML of header block
+export const Header = () => {


The task requires all components to be exported using export default. This is a named export. You should remove the export keyword from here and add export default Header; at the end of the file.

mateacademy-ai-mentor · 2026-02-28T15:01:36Z

src/components/Navigation/Navigation.jsx

@@ -0,0 +1,15 @@
+import './Navigation.css';
+
+export const Navigation = () => {


The task requires all components to use a default export. This component uses a named export. You should remove export from this line and add export default Navigation; after the component is defined.

mateacademy-ai-mentor · 2026-02-28T15:01:36Z

src/components/Navigation/Navigation.jsx

+  <nav className="navigation">
+    <a className="navigation__link" href="#about">
+      About
+    </a>
+    <a className="navigation__link" href="#services">
+      Services
+    </a>
+    <a className="navigation__link" href="#contact">
+      Contact
+    </a>
+  </nav>;


This component doesn't return anything. When using curly braces {} for an arrow function body, you must explicitly use the return keyword to return the JSX. Without it, the component returns undefined and will not be rendered.

mateacademy-ai-mentor · 2026-02-28T15:01:36Z

src/components/Welcome/Welcome.jsx

+import './Welcome.css';

-// Create a Welcome function returning the HTML of welcome block
+export const Welcome = () => {


The task requires all components to use a default export. This is a named export. You should remove the export keyword from this line and add export default Welcome; after the component definition.

mateacademy-ai-mentor · 2026-02-28T15:01:36Z

src/components/Welcome/Welcome.jsx

+  <section className="welcome">
+    <span className="welcome__text">Sticky Header!</span>
+  </section>;


This component does not return any JSX. Because you're using curly braces {} for the function body, you need to add an explicit return statement before this <section> element. Without it, the component returns undefined.

mateacademy-ai-mentor

Review Summary

Great progress on refactoring the application! You've correctly split the UI into components and moved the base styles. However, a few critical issues need to be addressed before this can be approved.

Here are the main points to fix:

The Header component is not rendering. It's missing a return statement in src/components/Header/Header.jsx. Remember, when an arrow function's body is wrapped in curly braces {}, you must explicitly return the JSX.
The export/import syntax is incorrect. The task requires using only export default. Please remove the export keyword from your component declarations (e.g., const Header = ...) and update the imports in src/App.jsx to use the default syntax without curly braces (e.g., import Header from './components/Header/Header';).
The CSS refactoring is incomplete. The responsive @media queries for .header and .article are still in src/App.css. They need to be moved into their corresponding component CSS files to complete the task.

Keep up the great work, and let me know if you have any questions!

✨ 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 · 2026-02-28T15:12:25Z

src/App.jsx

+import { Header } from './components/Header/Header';
+import { Welcome } from './components/Welcome/Welcome';
+import { Article } from './components/Article/Article';
+import { Navigation } from './components/Navigation/Navigation';


The task requires using default exports for all components. When importing a component that uses a default export, you should not use curly braces. For example, this should be import Header from './components/Header/Header';. Please apply this change to all component imports in this file.

mateacademy-ai-mentor · 2026-02-28T15:12:25Z

src/components/Article/Article.jsx

+import './Article.css';

-// Create an Article function returning the HTML of article block
+export const Article = () => {


While adding export default at the end of the file is correct, you should remove the export keyword from this line to avoid having both a named and a default export. The requirement is to only use export default. The line should be const Article = () => {.

mateacademy-ai-mentor · 2026-02-28T15:12:25Z

src/components/Navigation/Navigation.jsx

@@ -0,0 +1,19 @@
+import './Navigation.css';
+
+export const Navigation = () => {


The task requires using only export default for all components. To fix this, you should remove the export keyword from this line, so it becomes const Navigation = () => {. The export default Navigation; at the end of the file is correct and sufficient.

mateacademy-ai-mentor · 2026-02-28T15:12:25Z

src/components/Header/Header.jsx

+import './Header.css';

-// Create a Header function returning the HTML of header block
+export const Header = () => {


The task requires using only export default for components. By using export here, you are creating a named export in addition to the default export on line 9. Please remove the export keyword from this line to have only a default export.

mateacademy-ai-mentor · 2026-02-28T15:12:25Z

src/components/Header/Header.jsx

+  <header className="header">
+    <h1 className="header__title">Site Name</h1>
+  </header>;


This component is missing a return statement. When an arrow function's body is wrapped in curly braces {}, you must explicitly use the return keyword to return the JSX. Without it, the component returns undefined and won't render anything on the screen.

mateacademy-ai-mentor · 2026-02-28T15:12:25Z

src/components/Welcome/Welcome.jsx

+import './Welcome.css';

-// Create a Welcome function returning the HTML of welcome block
+export const Welcome = () => {


The task requires using only export default for all components. You should remove the export keyword from this line to avoid having both a named and a default export. The line should simply be const Welcome = () => {.

mateacademy-ai-mentor

Review Summary

Excellent work on this update! You've successfully addressed all the feedback from the previous review, resulting in a clean and well-structured application. The components and their corresponding styles are now correctly separated, and the code fully meets all task requirements. I am happy to approve your solution. Great job!

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

Rate AI review example ↩

add task solution

4b595b6

mateacademy-ai-mentor suggested changes Feb 28, 2026

View reviewed changes

add task solution

d63d366

naviailpach requested a review from mateacademy-ai-mentor February 28, 2026 15:10

mateacademy-ai-mentor suggested changes Feb 28, 2026

View reviewed changes

add task solution

7c69d4a

naviailpach requested a review from mateacademy-ai-mentor February 28, 2026 15:25

mateacademy-ai-mentor approved these changes Feb 28, 2026

View reviewed changes

		@@ -0,0 +1,15 @@
		import './Navigation.css';

		export const Navigation = () => {

		@@ -0,0 +1,19 @@
		import './Navigation.css';

		export const Navigation = () => {

Conversation

naviailpach commented Feb 28, 2026

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!

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!

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