zadanie01.jsx

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

document.addEventListener('DOMContentLoaded', function(){
    class ShopItem extends React.Component {
        onBuyButtonClick = () => {
            if ( typeof this.props.onBuy === 'function' ){
                this.props.onBuy( this.props.title );
            }
        };
        render(){
            return <div>
                <h1>{ this.props.title }</h1>
                <button onClick={this.onBuyButtonClick}>Kup</button>
            </div>;
        }
    }

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

            this.state = {
                list : [],
            };
        }

        handleItemBuy = ( itemTitle ) => {
            const listCopy = this.state.list.slice();

            listCopy.push( itemTitle );

            this.setState({
                list : listCopy,
            });
        };

        render(){
            return <div>
                <ShopItem onBuy={this.handleItemBuy} title="skarpetki" />
                <ShopItem onBuy={this.handleItemBuy} title="koszula" />
                <ShopItem onBuy={this.handleItemBuy} title="pończochy" />
                <ul>
                    {this.state.list}
                </ul>
            </div>;
        }
    }

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

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