Tip Calculator App using Intl.NumberFormat() as Format Currency

Community feedback

• 

  Rodrigoue9•120

  @Rodrigoue9Posted over 2 years ago

  amazing Nurcholis. I hope to reach your level :)

  0

  ---

  

  Nurcholis•420

  @cholis04Posted over 2 years ago

  @Rodrigoue9 Thank you. I'm also still learning and I think I will continue to do so. Hope you can get it too. Happy coding

  0
• 

  Cameron Chandler•850

  @webstormcamPosted over 2 years ago

  This is an awesome solution! Great Job! What did you find to be the most challenging part of the challenge?

  0

  ---

  

  Nurcholis•420

  @cholis04Posted over 2 years ago

  @webstormcam Thank you. I'm glad you asked.

  The challenging part to solve in this case is resetting the form validation error message. Since I'm using React. I passed some values ​​into child components

  function FormSplitter() {
    const [bill, setBill] = useState('');
   ...
   ...
  
    return(
      ...
       <TextInputGroup value={bill} ... />
        ...
    )
  }
  

  Then, I validate the child component's to display an error message. But the problem is that when the form is reset, the error message validated in the child component does not disappear.

  Because the error state is executed in the child component.

  function TextInputGroup({value, ...}) {
    const [error, setError] = useState(null);
    ...
    ...
    return(
     ...
     {error ? <TextError role="alert">{error}</TextError> : null}
     ...
    )
  
  
  }
  

  In order to be able to run setError() in a child component, I use useEffect() to check for changes in the state of the values ​​in the parent component.

  After that, I give a condition if the value is empty. then it will run setError()

      useEffect(() => {
          if (value === '') {
             setError(null);
          }
      }, [value]);
  

  I'm sure there must be a better approach than this. And I'm happy to try to overcome this

  0

  

  Simon Davis•505

  @SkidragonPosted over 2 years ago

  @cholis04 Hi, definitely nice work on the styling. I recommend react-hook-form library to handle the error handling in the form. Way less useEffect and useState to deal with and I used it with the memory game and audiophile projects for frontendmentor. Here is an example of me creating the checkout page for audiophile: https://github.com/Skidragon/monorepo-portfolio/blob/main/apps/audiophile/pages/checkout.tsx

  0

  

  Nurcholis•420

  @cholis04Posted over 2 years ago

  @Skidragon Looks like I need this to be able to help handle validation errors on forms easily.

  I will try to use it. Thank you very much for your advice.

  0
• 

  Alazar Getachew•260

  @AlazarG19Posted over 2 years ago

  Nice solution

  0

  ---

  

  Nurcholis•420

  @cholis04Posted over 2 years ago

  @AlazarG19 Thank you

  0