Solution

[JPodgrodzki]

DEMO LINK

[mateacademy-ai-mentor]

Review Summary

Hey there! 👋 The code implements the goods selector functionality well, but there are a couple of things we need to address. The main issue is the use of inline event handlers, as highlighted in the checklist. Creating separate methods for your onClick handlers will improve code maintainability and prevent unnecessary re-renders. I've provided an example in the comments. Also, remember that when using arrow functions as onClick handlers without arguments, you can directly pass the method instead of creating a new arrow function. Keep up the great work! 💪

---

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

Footnotes

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

This is an inline event handler. According to the checklist item 2, it's better to define a separate method and pass it to the onClick prop.

<button 
  type="button"
  onClick={() => {}}
>
 Click me
</button>

GOOD EXAMPLE:

handleClick = () => {};

return (
  <button 
    type="button"
    onClick={handleClick}
  >
   Click me
</button>
)

[mateacademy-ai-mentor]

This is an inline event handler. According to the checklist item 2, it's better to define a separate method and pass it to the onClick prop.

<button 
  type="button"
  onClick={() => {}}
>
 Click me
</button>

GOOD EXAMPLE:

handleClick = () => {};

return (
  <button 
    type="button"
    onClick={handleClick}
  >
   Click me
</button>
)

[mateacademy-ai-mentor]

This is an inline event handler. According to the checklist item 2, it's better to define a separate method and pass it to the onClick prop.

<button 
  type="button"
  onClick={() => {}}
>
 Click me
</button>

GOOD EXAMPLE:

handleClick = () => {};

return (
  <button 
    type="button"
    onClick={handleClick}
  >
   Click me
</button>
)

[mateacademy-ai-mentor]

Review Summary

The code is well-structured and implements the goods selector functionality. There's a minor issue with the onClick handler in src/App.tsx where an arrow function is used inline: onClick={() => handleAddGood(good)}. According to the checklist, since handleAddGood already takes an argument, you should pass the method directly: onClick={handleAddGood}. I'm approving this PR to help you move forward, but please address this inline event handler issue in the future to avoid unnecessary re-renders and improve performance. Keep up the great work!

---

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

Footnotes

1. Rate AI review example ↩

[mateacademy-ai-mentor]

According to the checklist, you should avoid inline event handlers to prevent creating a new arrow function after component re-rendering. Consider creating a separate method for this onClick handler.

Checklist item: 2. [CODE KNOWLEDGE] - Create separate methods instead of creating inline event handlers (if we do so - we don't create new arrow function after component re-rendering)