React site with Sass and Mobile-first workflow

Hi @anh-vumartell,

I started doing this challenge when I saw your questions because I couldn't remember enough react to answer confidently!

In addition to @Nikuze's comments above, I've discovered the ValidityState() interface which I'm using in my updatePeople function:

  const updatePeople = (e) => {
    if (e.target.validity.valid) {
      setPeople(() => e.target.value);
    } else {
      setPeople(() => 1);
      e.target.value = 1;
    }
  };

I'm sure there's a more elegant way of writing this, but it's what I have for now!

I see you haven't solved the selected % styling yet - here's what I'm doing:

function PercentButton( { percentage, isSelected, handleClick } ) {
  let className = "tip__button";
  if ( isSelected ) { className += " is-selected"; }
  else {
    className = "tip__button";
  }
  return (
    <button className={className} onClick={() => handleClick( percentage )}>{percentage}%</button>
  );
}

Again, it's not super-elegant, but it does the job.

I will try to answer sub-question number two and the third question

sub-question number Two : To prevent a user from entering negative numbers, just check if the number entered by a user is less than or equal to zero. If it is, that number will not be entered :

const updateBill = (e) => { if(e.target.value <= 0) { setBillInput("") } else { setBillInput(e.target.value) }}

and add this same condition on all your update functions

question number 3 : the reason why the field values are not cleared is because you forgot to assign the value props value={value} to your input in the InputControl component

in the InputControl component, change your input : <input type={props.type} onChange={props.onAddInfo} />

to this : <input type={props.type} onChange={props.onAddInfo} value={value} />