import React, { Component } from 'react';
import CounterButton from './CounterButton';
import CounterHover from './CounterHover';
import WithRenderProps from './WithRenderProps';


class Counter extends Component {

  render() {
    return (     
        <>
        <WithRenderProps 
          render={(counter, counterHandler) => <CounterButton counter={counter} counterHandler=counterHandler} />}
        />
        <WithRenderProps 
         render={(counter, counterHandler) => <CounterHover counter={counter} counterHandler={counterHandler} />}
        />
        </>      
    );
  }
}

export default Counter;

import React, { Component } from 'react';

const CounterButton = (props) => {
	const { counter, counterHandler } = props;
  return <button onClick={counterHandler}> Clicked {counter} times</button>
}

export default CounterButton;

import React, { Component } from 'react';

const CounterOver = (props) => {
	const { counter, counterHandler } = props;
  return <p onMouseOver={counterHandler}> Clicked {counter} times</p>
}

export default CounterOver;

import React, { Component } from 'react';

class WithRenderProps extends Component {

	constructor(props) {
			super(props);

			this.state = {
				counter: 0
			}
		}

	counterHandler = () => {
		this.setState((prevState) => ({counter: prevState.counter + 1}))
	}

  render() {
    return (this.props.render(this.state.counter, this.counterHandler));
  }
}

export default WithRenderProps;