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

class ShowMore extends React.Component {
    state = {
        showText: false,
    }

    handleClick = (e) => {
        this.setState({
            showText: !this.state.showText,
        });
    }

    render() {
        if(this.state.showText) {
            return <div onClick={this.handleClick}>
                {this.props.children}
            </div>;
        }

        return <a onClick={this.handleClick}>Pokaz więcej</a>
    }
}

class App extends React.Component {
    render() {
        return (
            <ShowMore>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mollis enim eget iaculis fermentum. Nulla facilisi. Morbi auctor quis leo ut efficitur. Duis a nulla sed nunc vestibulum condimentum ac vitae lorem. Vestibulum at ornare lacus, in euismod diam. Fusce varius, justo convallis varius elementum, quam felis molestie purus, accumsan imperdiet lacus nulla sed nunc. Suspendisse efficitur risus vel ante pharetra cursus.</p>
            </ShowMore>
        )
    }
}

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