This is a solution to the Tip calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
    • ReactJS ignores setting input values to null
• Continued development
  • Useful resources
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Calculate the correct tip and total cost of the bill per person

• Solution URL: Github
• Live Site URL: Tip calculator

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Tailwindcss - For styles

Setting ReactJS does not set an input value to null. Instead, it ignores it and keeps the last value. NumberFormat ignores undefined and null. ReactJS open issue - Treat value={null} as empty string

It is recommended to assign an empty string to reset inputs. Underlying all this is Javascript's inconsistent usage of null.

A common issue with ReactJS is the infinite redraw. I had this twice. First time with the calculation of the tips when I put the calculated values in state. Second time with testing if the reset button should be disabled and putting it into state. In both cases I shouldn't have tried to store what could have been calculated, but I didn't know how to solve it.

• by putting in calculateAmounts at the start of the app it was recalculated whenever one of the state variables changed and then passed to the Card that displayed the results.

const output = calculateAmounts(bill, regularTip, customTip, people)

<CalculationCard output={output} .... >

• I had a test in the App called checkResetDisabled. It relies on closure making the state available to it. It works but I only thought on what was happening when I reviewed the code.

  // App.js
  
  const [bill, setBill] = useState("")
  const [regularTip, setRegularTip] = useState("")
  const [customTip, setCustomTip] = useState("")
  const [people, setPeople] = useState("")
  
  ...
  
  const checkResetDisabled = () => {
    // only works because it accesses outer variables
    return bill + regularTip + customTip + people === ""
  }
 
  ...
  
  <CalculationCard ... checkResetDisabled={checkResetDisabled}
  
  // CalculationCard.js
  
  function CalcuationCard(props) {
    ...
    <button
          className="h-12 w-full flex items-center justify-center text-alto-200 bg-cyan-200 hover:bg-cyan-100 text-xl font-bold rounded disabled:bg-granny-smith-300 disabled:text-granny-smith-400"
          onClick={props.handleClick}
          // Javscript allowing checkResetDisabled to access variables
          // where it was set up
          disabled={props.checkResetDisabled()}
    >
    ...
  }

• How to show an error message in React - This is my second React project and I wanted a way to do this without libraries.

• Frontend Mentor - @notapatch
• Twitter - @yourusername