Render Props vs Component Composition (React)

App.js

import React from 'react';
import './App.css';
import MyFunctionComponent from './MyFunctionComponent';
import MyClassComponent from './MyClassComponent';
import MyAnotherClassComponent from './MyAnotherClassComponent';

function App() {
  return (
    <div className="App">
      <MyFunctionComponent />
      {/* <MyClassComponent render={text => (<MyAnotherClassComponent text={text} />)} /> */}
      {/* <MyClassComponent children={text => (<MyAnotherClassComponent text={text} />)} /> */}
      <MyClassComponent>{text => <MyAnotherClassComponent text={text} />}</MyClassComponent>
    </div>
  );
}

export default App;

MyAnotherClassComponent.js

import React, { Component } from 'react'

export default class MyAnotherClassComponent extends Component {
    render() {
        const text = this.props.text
        return (
            <h2>{text}</h2>
        )
    }
}

MyAnotherFunctionComponent.js

import React from 'react'

export default function MyAnotherFunctionComponent(props) {
    return (
        <div>
            <p className="first-text">{props.first}</p>
            <p className="second-text">{props.second}</p>
        </div>
    )
}

MyClassComponent.js

import React, { Component } from 'react'
// import MyAnotherClassComponent from './MyAnotherClassComponent';

export default class MyClassComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {value: ''}
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({value: 'hello world!'})
    }

    render() {
        return (
            <div>
                <h1 onClick={this.handleClick}>click me!</h1>
                {/* <MyAnotherClassComponent text={this.state.value} /> */}
                {/* {this.props.render(this.state.value)} */}
                {this.props.children(this.state.value)}
            </div>
        )
    }
}

MyFunctionComponent.js

import React from 'react'
import MyAnotherFunctionComponent from './MyAnotherFunctionComponent'

export default function MyFunctionComponent() {
    return (
        <div>
            <MyAnotherFunctionComponent first="hello" second="world" />
        </div>
    )
}