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/>; }