class ContainerIdDetector extends React.Component {

  constructor() {

    super();

    this.state = { containerId: "" };

  }

​

  componentDidMount() {

    this.setState({

      containerId: ReactDOM.findDOMNode(this).parentNode.getAttribute("id")

    });

  }

​

  render() {

    if (!this.state.containerId) {

      return <span />;

    } else {

      return React.cloneElement(

        this.props.children, { [this.props.property]: this.state.containerId }

      );

    }

  }

}

​

// Takes an optional property name `property` and returns a function. This

// returned function takes a component class and returns a new one

// that, when rendered, automatically receives the ID of its parent

// DOM node on the property identified by `property`.

function withContainerId(property = "containerId") {

  return (Component) => (props) =>

    <ContainerIdDetector property={property}>

      <Component {...props} />

    </ContainerIdDetector>

}

​

​

​

​

​

@withContainerId()

class Application extends React.Component {

  render() {

    return <div>My container's ID is: {this.props.containerId}</div>;

  }

}

​

// or, if you don't use decorators:

//

// Application = withContainerId()(Application);

​

ReactDOM.render(<Application />, document.getElementById("react-app-container"));