render-callbacks-with-Component.js

class Counter extends Component {    
    componentWillMount() {
        let self = this;
        class IfEven extends Component {
            render() {
                let {children} = this.props;
                return !(self.props.value % 2) ? children : null;
            }
        }

        class IfOdd extends Component {
            render() {
                let {children} = this.props;
                return self.props.value % 2 ? children : null;
            }
        }
        this.IfEven = IfEven;
        this.IfOdd = IfOdd;
    }
    render() {
        let render = this.props.children;
        return render({IfEven: this.IfEven, IfOdd: this.IfOdd});
    }
}

class RunIt extends Component {
    state = {counterVal: 0}
    inc = () => this.setState(({counterVal}) => ({counterVal: counterVal + 1}));
    dec = () => this.setState(({counterVal}) => ({counterVal: counterVal - 1}));
    render() {
        return (
            <div style={{margin: '30px'}}>
                <button onClick={this.inc}>Up</button>
                <button onClick={this.dec}>Down</button>
                <span>Current value {this.state.counterVal}</span>
                <Counter value={this.state.counterVal}>
                    {({IfEven, IfOdd}) => (
                        <div>
                            <IfEven><span style={{color: 'blue'}}>Yoooooooo, the value is even</span></IfEven>
                            <IfOdd><span style={{color: 'red'}}>Yoooooooo, the value is odd</span></IfOdd>
                        </div>
                    )}
                </Counter>
            </div>
        );
    }
}

render(<RunIt />, document.getElementById('home'));