How to render whole tree from within React component?

Question

I'm building a higher-order component, and I'd like it to render out all of the composed component's children, and their children, all the way down the line.

When I call render(), though, it only renders the component's children, not their children's children.

How do I render it all the way down?

Here's some code:

export default ComposedComponent => {
  class HoC extends ComposedComponent {
    render() {
      console.log(super.render())
    }
  }

  return HoC
}

Answer 1

You never call render manually. Render is automatically called upon initialisation, and every time the props and state change. And when render is called on an element, it is also called on all its child elements.

Additionally, don't use inheritance. React components extend React.Component , they never extend other components.