zadanie02.jsx

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

document.addEventListener('DOMContentLoaded', function(){

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

            this.state = {
                bgColor: 'white',
            };
        }

        componentDidMount() {
            this.intervalId = setInterval(() => {
                if (this.props.onOff === false) return;

                let newColor;

                if (this.state.bgColor === this.props.color) {
                    newColor = 'white';
                } else {
                    newColor = this.props.color;
                }

                this.setState({
                    bgColor: newColor,
                });
            }, this.props.frequency);
        }

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

        render() {
            return <div style={{
                width: '800px',
                height: '50px',
                backgroundColor: this.state.bgColor,
            }}/>;
        }
    }

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

            this.state = {
                lightsOn: true,
            };
        }

        componentDidMount() {
            this.timeoutId = setTimeout(() => {
                this.setState({
                    lightsOn:false,
                });
            }, 1000);
        }

        componentWillUnmount() {
            clearTimeout(this.timeoutId);
        }

        render(){
            return <div>
                <StrobeLight color="red"  frequency={250} onOff={this.state.lightsOn} />
                <StrobeLight color="blue" frequency={200} onOff={this.state.lightsOn} />
                <StrobeLight color="yellow" frequency={175} onOff={this.state.lightsOn} />
            </div>;
        }
    }

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

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