const Child1 = ({ countFromParent }) => {
  return (
    <div id='Child1' className='box child-box'>
      <h2>This is child 1.</h2>
      <p>It knows the count from the parent.</p>
      <p>Count from Parent = { countFromParent }</p>
    </div>
  )
}
      
const Child2 = ({ incrementParent, decrementParent }) => {
  return (
    <div id='Child2' className='box child-box'>
      <h2>This is child 2.</h2>
      <p>It can affect the state of the parent because it received the callback functions from the parent.</p>
      <button onClick={ incrementParent }>Increment Parent</button>
      <button onClick={ decrementParent }>Decrement Parent</button>
    </div>
  )
}
      
const Child3 = ({ countFromParent, incrementParent, decrementParent }) => {
  // Using the useState hook, as opposed to a class...
  const [selfCount, setSelfCount] = React.useState(42)
  const incrementSelf = () => setSelfCount(c => c + 1)
  const decrementSelf = () => setSelfCount(c => c - 1)
  return (
    <div id='Child3' className='box child-box'>
      <h2>This is child 3.</h2>
      <p>It can receive and change the state of the parent but also has its own state.</p>
      <p>For fun, it uses a functional component with the <i>useState</i> hook instead of a class.</p>
      <p>Own Count = {selfCount}</p>
      <button onClick={ incrementSelf }>Increment Self</button>
      <button onClick={ decrementSelf }>Decrement Self</button>
      <p>Parent Count = {countFromParent}</p>
      <button onClick={ incrementParent }>Increment Parent</button>
      <button onClick={ decrementParent }>Decrement Parent</button>
    </div>
  )
}


class Parent extends React.Component {
  state = { count: 100 }
  
  increment = () => this.setState(oldState => ({ count: oldState.count + 1 }))
  decrement = () => this.setState(oldState => ({ count: oldState.count - 1 }))
  
  render() {
    return (
      <div id='Parent' className='box'>
        <h1>This is the parent.</h1>
        <p>This parent component has its own state and can manipulate it.</p>
        <p>Count = { this.state.count }</p>
        
        <button onClick={ this.increment }>Increment Self</button>
        <button onClick={ this.decrement }>Decrement Self</button>
        <Child1 countFromParent={ this.state.count } />
        <Child2 incrementParent={ this.increment } decrementParent={ this.decrement } />
        <Child3
          countFromParent={ this.state.count }
          incrementParent={ this.increment }
          decrementParent={ this.decrement }
        />
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"))