function withMark(Component) {
  return class extends React.Component {
    render() {
      const previousMarks = this.props.previousMarks || [];
      const combinedMarksForChildren = this.props.mark ? [...previousMarks, this.props.mark] : previousMarks;
      const nextMark = this.props.mark ? [...previousMarks, this.props.mark] : previousMarks;
      
      return (
        <Component {...this.props} mark={nextMark}>
          {React.Children.map(this.props.children, child => (
            React.cloneElement(child, { previousMarks: combinedMarksForChildren })
          ))}
        </Component>
      );
    }
  }
}

class Thing extends React.Component {
  render() {
    const children = this.props.children;
    if (React.Children.count(children) > 0) {
      return <div>{children}</div>
    } else {
      return <div>Empty Thing: [{this.props.mark.join(', ')}] </div>;
    }
  }
}

Thing = withMark(Thing);

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Hello World</p>
        <Thing>
          <Thing mark="8" />
        </Thing>
        
        <Thing />
        <Thing mark="2">
          <Thing mark="5">
            <Thing mark="7" />
            <Thing />
          </Thing>
          <Thing />
        </Thing>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('main'));