zadanie00.jsx

import React from 'react';
import ReactDOM from 'react-dom';

document.addEventListener('DOMContentLoaded', function(){
    class ButtonToClick extends React.Component {
        handleButtonClick = () => {
            if ( typeof this.props.onClick === 'function' ){
                this.props.onClick();
            }
        };

        render(){
            return <button onClick={this.handleButtonClick}>Click!</button>;
        }
    }

    class ButtonCounter extends React.Component {
        constructor(props){
            super(props);

            this.state = {
                count  : 0,
            };
        }

        handleIncBtnClick = () => {
            this.setState({
                count : this.state.count + 1
            });
        };

        render(){
            return <div>
                <h1>{ this.state.count }</h1>
                <ButtonToClick onClick={this.handleIncBtnClick}/>
                <ButtonToClick onClick={this.handleIncBtnClick}/>
                <ButtonToClick onClick={this.handleIncBtnClick}/>
                <ButtonToClick onClick={this.handleIncBtnClick}/>
            </div>;
        }
    }

    class App extends React.Component {
        render(){
            return <ButtonCounter  />;
        }
    }

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

import React from 'react';
import ReactDOM from 'react-dom';

document.addEventListener('DOMContentLoaded', function(){
    class ButtonToClick extends React.Component {
        handleButtonClick = () => {
            if ( typeof this.props.onIncrement === 'function' ){
                this.props.onIncrement();
            }
        };

        render(){
            return <button onClick={this.handleButtonClick}>Click!</button>;
        }
    }

    class ButtonCounter extends React.Component {
        constructor(props){
            super(props);

            this.state = {
                count  : 0,
            };
        }

        handleIncBtnClick = () => {
            this.setState({
                count : this.state.count + 1
            });
        };

        render(){
            return <div>
                <h1>{ this.state.count }</h1>
                <ButtonToClick onIncrement={this.handleIncBtnClick}/>
                <ButtonToClick onIncrement={this.handleIncBtnClick}/>
                <ButtonToClick onIncrement={this.handleIncBtnClick}/>
                <ButtonToClick onIncrement={this.handleIncBtnClick}/>
            </div>;
        }
    }

    class App extends React.Component {
        render(){
            return <ButtonCounter  />;
        }
    }

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