Composition.jsx

import React from "react";
import FirstChild from "./FirstChild";
import SecondChild from "./SecondChild";

class DumbosParent extends React.Component {
  state = { availableShoes: 6, lollipops: 9 };

  render() {
    const { availableShoes, lollipops } = this.state;
    return (
        <div>
          <h1>I am Dumbos Father. I keep track of shoes and lollipops.</h1>
          <Dumbo
            availableShoes={availableShoes}
            firstChild={<FirstChild lollipops={this.state.lollipops} />}
            secondChild={<SecondChild />}
          />
          <AnotherComponent availableShoes={this.state.availableShoes} />
        </div>
    );
  }
}

// Dumbo.js
class Dumbo extends React.Component {
  state = { clothing: null, firstChild: null, secondChild: null };
  handleState = () => {
    this.setState({
      clothing: "jeans",
      firstChild: "shoes",
      secondChild: "hat"
    });
  };
  render() {
    return (
      <div>
        <h1>Hey, my name is Dumbo. </h1>
        <p> I am wearing {this.state.clothing} today.</p>
        <button onClick={this.handleState}>dress up</button>
        /* --- we have a problem here, children also expect props from Dumbo. --- */
        {this.props.firstChild}
        {this.props.secondChild}
      </div>
    );
  }
}