import React, { Component } from 'react'
class Asterisco extends React.Component {
constructor(props){
console.log("Entro en el constructor");
super(props)
this.state = {
cadena: '*'
};
}
incrementar = () => {
this.setState({cadena:this.state.cadena+'*'})
};
decrementar = () => {
let a=this.state.cadena
if (a.length>0){
this.setState({cadena:a.slice(0,-1)})
}
};
reset=()=>{
this.setState({cadena:'*'})
}
shouldComponentUpdate() {
if (this.state.cadena.length%2==0){
return false;
} else{
return true;
}
}
render() {
console.log("Entro en el renderizado");
return (
<div>
<h2>{this.state.cadena}</h2>
<h3>El fabuloso programa de jugar con los asteriscos</h3>
<p>En este momento tienes {this.state.cadena.length} asteriscos</p>
<button onClick={this.decrementar}>Decrementar</button>
<button onClick={this.incrementar}>Incrementar</button>
<button onClick={this.reset}>Reset</button>
</div>
);
}
componentDidMount(){
console.log("Componente montado y listo para funcionar");
}
componentDidUpdate(){
console.log("El componente se ha actualizado");
}
}
export default function App() {
return <Asterisco/>;
}