Introducción a React - 07 onClick interacciones con el usuario

index.jsx

'use strict'
// 0.- Nuestro primer componente
class Hola extends React.Component {
    // 5.- Añadimos la propiedad state
    state = {
        emoticono: '😎'
    }
    // 6.- Método donde utilizamos la funcion `setState`
    cambiarEmoticono = () => {
        let emoticono = '🤩'
        if (emoticono === this.state.emoticono){
            emoticono = '😎'
        }
        this.setState({emoticono})
    }
    render() {
        // 2.- mostrar la propiedad `quien`
        // 7.- añadimos un botón con el atributo onClick
        return  <div>
                    <h1>¡Hola {this.props.quien} {this.state.emoticono}!</h1>
                    <button onClick={this.cambiarEmoticono}>Cambiar estado</button>
                </div>;
    }
}
// 4.- Definimos un componente que renderiza otro componente
class App extends React.Component {
    render() {
        return <Hola quien="Universo React" />;
    }
}
// 1.- Renderizar nuestra App
ReactDOM.render(
    // 3.- Pasar un mensaje en la propiedad `quien`
    <App />,
    document.getElementById("root")
)