Mobile first with React.js, Framer Motion and Tailwind CSS

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  Hi, Karol Binkowski! 👋

  Good job on this challenge! 👏 Your solution looks great and responds nicely! 🙌 I really like the animations that you added to the components, as well! 😀

  A tiny suggestion I have is to wrap the meatballs menu icons in button tags since they would typically open some sort of menu when clicked.

  I took a look at your code and noticed that you were doing this in your components:

  export default function Component(props) {
    const { prop1 } = props;
    const { prop2 } = props;
    const { prop3 } = props;
  
    // etc.
  

  It's much easier (and nicer-looking, haha) to simply grab those props using object destructuring syntax, as in:

  export default function Component({ prop1, prop2, prop3 }) {
    // etc.
  

  You can then reference those props normally in the rest of your function. If you'd like to learn more about object destructuring/assignment, check out this helpful video on the topic.

  Hope this helps. 😊

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  2

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @ApplePieGiraffe Now as I see it, it's funny to me (just like when I saw return isValid() ? true : false in my code 🤣). I could have wrapped the props in const { prop1, prop2, prop3 } = props statement, but I didn't remember I could do that in function arguments directly (I think I've done it before). Thanks a lot and have a nice day 😄.

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  @GrzywN

  Haha, glad to help! Have a nice day, too! ☀️

  1