import React from 'react';

// const App = () => (
//   <div className="app">
//     <h1>Hello world.</h1>
//     <p>Chili con carne!</p>
//   </div>
// );
// export default App;

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      counter: 0,
    };
  }

  getText() {
    const { counter } = this.state;
    return `Hello world x ${counter}.`;
  }

  increaseCounter() {
    this.setState(previousState => ({
      counter: previousState.counter + 1,
    }));
  }

  resetCounter() {
    this.setState({
      counter: 0,
    });
  }

  render() {
    return (
      <div className="app">
        <h1>{this.getText()}</h1>
        <a href="#" onClick={() => this.increaseCounter()}>Chili con carne!</a>
        <br />
        <a href="#" onClick={() => this.resetCounter()}>Set to zero</a>
      </div>
    );
  }
}