Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

React JS, SASS, hooks-for-redux

Chris Paschall•440
@ChrisP1108
A solution to the Invoice app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


One issue I struggled with was when adding items to the list on the form, when more than two items were added, the second and third items would duplicate themselves when typing. To solve this, I set a limit so that only two items can be added to an invoice to get around the issue after being unable to resolve it.

I did discover that ids were being duplicated on the second and third items, which may be why, but after trying multiple methods, I was unsuccessful in resolving the issue.

If anyone can figure it out, it would be greatly appreciated. I utilized the ReactJS framework.

Given that this is a full stack, if a JSON server is not run when opening this website, you'll get the error notification so be sure to run a JSON server if you want to really see this in action. I setup the server on port 5000.

In my github respository, theres a file entitled "README-DEVELOPER-CHRIS-PASCHALL-NOTES.txt" which gives more info on my experience and what I utilized and what I learned.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Matt Studdert•13,611
    @mattstuddert
    Posted over 3 years ago

    Hey Chris! Awesome to see that you've taken on the invoice app. It's a big project! To help others view your project, I'd recommend hosting this site somewhere like Heroku, where you can run a full-stack app.

    Also, we provide a README-template.md which is a perfect place to write about what you learned and decisions you made. This means you can take what you wrote in the .txt file, put it in the template, and then delete the challenge setup README.md to rename the template file. Once you do that, your project review README will show up on your repository by default 🙂

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub