Crear un componente con un h1 en el que vamos a tener un asterisco:
*
También un botón que al pulsarlo nos añada otro asterisco:
[Añadir]
***
Otro botón [Quitar] Que nos quite un asterisco
import React, { Component } from 'react'
class Asterisco extends React.Component {
constructor(props){
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:'*'})
}
render() {
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>
);
}
}
export default function App() {
return <Asterisco/>;
}