Tip Calculator Component using React & SCSS

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)

...
}

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!