Tip Calculator using React JS and Tailwind CSS

Community feedback

• 

  Matt Seidel•570

  @mseidel819Posted over 2 years ago

  Your solution is very clean and easy to read! Looks great.

  The only suggestion I have deals with the jsx that renders the tip buttons. Its totally unnecessary, but you might be able to save yourself some lines of code if you figure out a way to get rid of the repeated code. The only real differences for each button are the percent values inside. Maybe something like: const percentArray=[5, 10, 15, 25, 50]; ... percentArray.map(percent=>{ return ( <button onClick={() => setTip(percent)} className={tip === {percent} ? 'active tip-btn' : 'tip-btn'} > {percent}% </button> )

  so I added the percent values to an array that I could map over. Then I replaced the hard-coded values with the variable in the map function. (full disclosure: theres a 95% chance my brackets and parentheses are wrong in my example. upside down smiley face)

  Marked as helpful

  1

  ---

  

  Carla•420

  @iamcgsPosted over 2 years ago

  @mseidel819 Thank you very much for taking time to check it out. I am just starting and this helps a lot! :)

  0