Tip Calculator Component using React & SCSS

Community feedback

• 

  Md5 dalton•1,430

  @md5daltonPosted over 2 years ago

  Hello Tyler,

  To avoid repeating yourself when you write your code, try identifying repetitions in your code patterns which can lead to it being hard to maintain, for example you can:

  1. De-structure the props object and use the values extracted where needed.
  2. Use functions to make your code reusable and organized, you can write a function that accepts a value and returns a string with two decimal points to get Price:

  This is how I'd rewrite Output component without changing to much of your code:

  // De-structure values you need from props and leave props if you need to use it somewhere
  function Output ({ people, billAmount, percentage, ...props }) {
  
      // Minimum value of people should be 1
      people = people < 1 ?? 1
  
      // Function to get Price
      const getPrice = value => value.toFixed(2)
  
      // Use that function to get corresponding values
      const getTip = getPrice(billAmount * (percentage/100)/people)
      const getTotal = getPrice(billAmount * (1 + percentage/100)/people)
  
  ...
  }
  

  Marked as helpful

  2

  ---

  

  Tyler•330

  @tylermaksPosted over 2 years ago

  @md5dalton thank you, much appreciated!

  0
• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello Tyler, good job getting the challenge done!, congratulations!

  Your condition doesn't seem to be bad for me, what you can do to optimize a bit your JSX is to use that code on a external helper function and declare them in your component with your props deestructured, and it will look a lot cleaner!, for example, create both helper functions like this:

  const getTip = (billAmount, people, percentage) => {
    const result =
      billAmount && people > 0
        ? ((billAmount * (percentage / 100)) / people).toFixed(2)
        : "0.00";
    return result;
  };
  const getTotal = (billAmount, people, percentage) => {
    const total =
      billAmount && people > 0
        ? ((billAmount * (1 + percentage / 100)) / people).toFixed(2)
        : "0.00";
     return total;
  };
  
  export {getTip, getTotal};
  

  Then in your component import both of them and use the params on your component to use them inside the functions:

  import {getTip, getTotal} from '/* The path of your helpers functions */'
  
  function Output({billAmount, people, percentage}) {
  
      const tipOutput = ["Tip Amount", "Total"]
     const Tip = getTip(billAmount, people, percentage);
     const Total = getTotal(billAmount, people, percentage);
  
    /*  The rest of your JSX goes here   */
  
  }
  

  With this you will have your component a bit cleaner, it isn't a major change and I didn't try it at my own, but you get the idea right?

  Hope my feedback helped you!

  Marked as helpful

  2

  ---

  

  Tyler•330

  @tylermaksPosted over 2 years ago

  @DavidMorgade thanks so much for the feedback - this helps a lot! I haven't destructured props in my components before, but will definitely utilize this moving forward. I've updated my code based on your comments. Thanks again!

  Tyler

  1