05 2Breact 2Bstate

05.- Reactjs⚛️ [Renderizar elementos con state]

05 2Breact 2Bstate

State nos ayuda a renderizar (renderear) partes específicas de nuestro programa sin tener que refrescar toda nuestra pagina, esta es la magia de reactjs.

import React, { Component } from 'react';

class Miclase extends Component {
constructor(){
super();
this.state={
count:1
};
this.clickBotones=this.clickBotones.bind(this);
}

componentDidMount(){
this.setState({
count:1
});
}

clickBotones(e){
if(e.target.id==="sumar"){
this.setState({
count:this.state.count+1
});
}
else if(e.target.id==="restar" && this.state.count > 1 ){
this.setState({
count:this.state.count-1
});
}
else if(e.target.id==="reiniciar"){
this.setState({
count:1
});
}
}
render (){
return (
<div className="contenido">
<h2>Contador {this.state.count}</h2>
<p>
<button id="sumar" onClick={this.clickBotones}>+</button>
<button id="restar" onClick={this.clickBotones}>-</button>
<button id="reiniciar" onClick={this.clickBotones}>Reiniciar</button>
</p>
</div>
);
}
}

export default Miclase;

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Eugenio Chaparro.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a digitalocean.com que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad