Handling events in ReactJS

handling-events.jsx

import React, { Component } from 'react';
import './App.css';

// topics touched: component, state, conditional rendering, event handler, prevent defalut.

class Toogle extends Component {
  constructor(props) {
    super(props);
    // the initial state of 'isToogleOn' is 'true'
    this.state = {
                  isToogleOn:true,
                  message: ''
                };

    // provides an event handler with the element 
    // is inicially render ('handleClick' is an event handler)
    this.handleClick = this.handleClick.bind(this);
    this.handleLinkEvent = this.handleLinkEvent.bind(this);
  };

  // change the state of 'isToogleOn' property
  // this method is the event handler of 'onClick' JSX attribute
  handleClick() {
    this.setState(state => ({
      isToogleOn: !state.isToogleOn
    }));
  }

  // an event handler for the link event with an prevent default
  handleLinkEvent(synthEvent) {
    // prevent the default value of the element <a> for its attribute 'onClick'
    synthEvent.preventDefault();
    // put a message 
    this.setState (
      {
        message: 'prevent default in action!'
      }
    )
    console.log('The link was clicked.');
  }

  render(){
    // conditional rendering
    // if 'isToogleOn' is false...
    if (!this.state.isToogleOn) {
      return (
        <div>
          <button onClick={this.handleClick} style={{
                                              backgroundColor:'orange', 
                                              width: 100, 
                                              height:100,
                                              marginTop: 100,
                                              opacity: 0.6}}>
            {this.state.isToogleOn ? 'ON' : 'OFF'}
          </button>

          {/* a link event */}
          <a href="https://reactjs.org/docs/getting-started.html" onClick={this.handleLinkEvent} style={{display:'block', marginTop: 50}}>
            This is a link
          </a>
          <p>
            {this.state.message}
          </p>

        </div>
      );
    }
      // if 'isToogleOn' is true...
      return (
        <div>
            <button onClick={this.handleClick} style={{backgroundColor:'yellow', width: 100, height:100, marginTop: 100}}>
              {/* evaluates if 'isToogleOn' is true or false
              and updates de UI according to that */}
              {this.state.isToogleOn ? 'ON' : 'OFF'}
            </button>
            <a href="https://reactjs.org/docs/getting-started.html" onClick={this.handleLinkEvent} style={{display:'block', marginTop: 50}}>
                This is a link
            </a>
            <p>
              {this.state.message}
            </p>
        </div>

    );
  }
}

function App() {
  return (
    <div className="App">
      <Toogle/>
    </div>
  );
}

export default App;