Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

174
Views
Changing State to a Component

I have two questions.

  1. How can i mantain the active state of a button?

Example

I click the tip button and it is OK. But when I enter a number of people, the button deactivate. How can I mantain this until a click the reset button?

  1. When I hit the reset button the state resets, but it stills rendering the input values. If i console log the state, I have to click two times to reset it.

here the code:

export default function Bill(){

const [bill,setBill]=useState(0)
const [tip,setTip]=useState(0)
const [people,setPeople]=useState(1)
const [clas,setClas]=useState(0)



function reset(){
    setBill(0)
    setTip(0)
    setPeople(1)
    setClas(1)
    console.log(bill)
    console.log(tip)
    console.log(people)
}


    
return(
    
<div className= {S.container}>
    
 <div>
    <div >
       
        
        <label>BILL</label>
        <input className={S.inputs} type='number' placeholder={bill} onChange= {e=>setBill(e.target.value)}/>

    </div>
      
    <div className={S.botones}>
    <label>SELECT TIP %</label>
      <button className={clas?S.tipbutton:S.tipbutton2} onClick={()=>setTip(0.05)} value={tip}>5%</button>
      <button className={S.tipbutton} onClick={()=>setTip(0.1)} value={tip}>10%</button>
      <button className={S.tipbutton} onClick={()=>setTip(0.15)} value={tip}>15%</button>
      <button className={S.tipbutton} onClick={()=>setTip(0.25)} value={tip}>25%</button>
      <button className={S.tipbutton} onClick={()=>setTip(0.5)} value={tip}>50%</button>
      <input className={S.inputcust} type="number" placeholder='Custom'  onChange={e=>setTip(e.target.value/100)}/>
    </div>
    
  <div>
        <label>N° OF PEOPLE</label>
        
        <input  className={S.inputs} type="number"  placeholder='0'  onChange={e=>setPeople(e.target.value)} />
    </div>
</div>
    <div className={S.results}>
        <div >
        Tip Amount
        /person
        <div>{Number(bill)*Number(tip)/Number(people)}</div>
        </div>

        <div>
            Total
            /person
            <div>{(Number(bill)*Number(tip)/Number(people))+Number(bill)/Number(people)}</div>
        </div>
        <button className={S.reset} onClick={reset}>Reset</button>
    </div>
</div>
)

}

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!