Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

175
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda