// State
class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      contador: 0
    }

  }

  onClickHandler() {
    this.setState({
      contador: this.state.contador + 1
    })
  }

  render() {
    return(
      <div>
        <Contador valor={this.state.contador} />
        <Button label="Add" onClick={() => this.onClickHandler()} />
        <Button label="Escreve no console" onClick={ () => console.log('ok')} />
      </div>
     );
  }
}

//<button onClick={() => this.onClickHandler()}>Add</button>

const Button = (props) => {
  return(
    <div>
      <button onClick={() => props.onClick()}>{props.label}</button>
    </div>
  );
}

const Contador = (props) => {
  return (
    <div>
      <h1>{props.valor}</h1>
    </div>
  );
}
// class Contador extends React.Component {

//   constructor() {
//     super()
//   }

//   render() {
//     return(
//       <div>
//         <h1>{this.props.valor}</h1>
//       </div>
//     );
//   }
// }

ReactDOM.render(
  <App />,
  document.getElementById('app')
)