CurrentTimeRenderCbOrChild.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 {render: renderFn, children: child} = this.props;
        return renderFn
            ? renderFn({time: this.state.time})
            : cloneElement(Children.only(child), {time: this.state.time})
    }
}

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

render(
    <div>
        <CurrentTime render={({time}) => (
            <div>
                <span style={{color: 'purple'}}>Time is {time} from callback</span>
            </div>
        )} />
        <CurrentTime>
            <ShowCurrentTime />
        </CurrentTime>
    </div>, document.getElementById('home')
);