How to nest another component in the parameters of a component, so that you can pass properties to it?

Question

JavaScript

Tell me how to make a wrapper for a component so that it loads the selected component in it?
Sample code sketch below or here codepen.io/anon/pen/BpJxgd

Есть корневой компонент <TestContent /> и для него есть два компонента <Test1 /> и <Test2 />

The TestContent runs some code that changes the output data. This data needs to be loaded into either Test1 or Test2.
Questions:
1) how can I transfer data to TestContent which component to load Test1 or Test2
2) How to transfer the corrected data to the selected component?

const { Component } = React

class App extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return(
      <div>
       <TestContent нужноПередатьКомпонентTest1&Test2 />
      </div>
    )
  }
}

class TestContent extends Component {
  render() {
     var data={name:"какие-то данные для вывода в выбранном компоненте"};
    return(
      <div>
        !!!! Как сюда загрузить компонет <Test1 data={data}> или <Test2 data={data}>, так чтобы в них присутствовали данные и переменной data?
      </div>
    )
  }
}

class Test1 extends Component {
  render() {
    return(
      <div>Test 1 — {this.props.data.name}</div>
    )
  }
}

class Test2 extends Component {
  render() {
    return(
      <div>Test 2 {this.props.data.name}</div>
    )
  }
}

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

Answer 1

You can simply pass the component itself to props.

<TestContent name={Test2} />
...
class TestContent extends Component {
  render() {
     var data={name:"какие-то данные для вывода в выбранном компоненте"};
     var Name = this.props.name;
    return(
      <div>
        <Name data={data} />
      </div>
    )
  }
}

codepen.io/anon/pen/vgpawM?editors=0010

Answer 2

Interesting implementations have already appeared, for example, here is such a project https://www.npmjs.com/package/react-async-component