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;

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)