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

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

        this.state = {
            sec: 0,
        }
    }

    componentDidMount() {
        this.id = setInterval(() => {

            this.setState({
                sec: this.state.sec + 1,
            }, () => {
                if(this.state.sec === this.props.text.length -1) {
                    clearInterval(this.id);
                }
            });

        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.id);
    }

    render() {
        return (
            <h1>{this.state.sec}, {this.props.text.substr(0, this.state.sec +1)}</h1>
        )
    }
}

class App extends React.Component {
    render() {
        return (
            <TextTyper text="Witaj!" />
        )
    }
}

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