CurrentTimeCloneChildren.js

import {render} from 'react-dom';
import React, {Component, Children, cloneElement} from 'react';

class CurrentTime extends Component {
    state = {time: ''};
    componentDidMount() {
        this._interval = setInterval(() => this.setState({time: this.getTime()}), 50);
    }
    componentWillUnmount() {
        clearInterval(this._interval);
    }
    getTime(){
        let t = new Date();
        return `${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`;
    }
    render() {
        let {children: child} = this.props;
        return cloneElement(Children.only(child), {time: this.state.time});
    }
}

class ShowCurrentTime extends Component {
    render() {
        return (
            <div>
                <span style={{color: 'blue'}}>Time is {this.props.time}</span>
            </div>
        );
    }
}

render(
    <div>
        <CurrentTime>
            <ShowCurrentTime />
        </CurrentTime>
    </div>, document.getElementById('home')
);