react counter

class Button extends React.Component {
	// this state can only be accessed within this one
  // state = { timer: 1 };
  
  // handleClick = () => {
  //   this.setState((prevState) => ({
  //     timer: prevState.timer + 1
  //   }));
  // };
  
  render() {
    return (
    	// have to execute new action 
      <button onClick={this.props.onClickFunction}>
        +1
      </button>
    );
  }
}

// presentational component
// renders state merely 
const Result = (props) => {
	return (
  	<div>{props.timer}</div>
  );
}

class App extends React.Component {
	// has the parent of both sibling components button and result 
	state = { timer: 1 };
	
  incrementCounter = () => {
    this.setState((prevState) => ({
      timer: prevState.timer + 1
    }));
  }
  
	render() {
  	return(
    	<div>
      	<Button onClickFunction={this.incrementCounter} />
        <Result timer={this.state.timer} />
      </div>
    )
  }
}

ReactDOM.render(<App />, mountNode);