How is a class component able to render another class component?

Lesson link:
https://www.codecademy.com/courses/react-101/lessons/components-render-each-other/exercises/component-render-action

This lesson didn’t explain how a component is able to render another component.

The only explanation was this

" When a component renders another component, what happens is very similar to what happens when ReactDOM.render() renders a component."

Which doesn’t really help

ReactDOM has a render() method, which allows you the see your component rendered on a web page.

The component itself (here ProfilePage) also has a render() method.

NavBar is first exported, then imported in ProfilePage.js

And then added within ProfilePage’s render method.

render() {
    return (
      <div>
        <NavBar />
        <h1>All About Me!</h1>
        <p>I like movies and blah blah blah blah blah</p>

So, essentially, a component within a component (NavBar within ProfilePage).

As ProfilePage is rendered on the web page, so is NavBar.

I get that NavBar is being exported, and imported, and is a component within a component but how it’s being rendered by the other component is my question. When we first get introduced to rendering a single component, the lesson gives this example and explanation:

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

ReactDOM.render() will tell <MyComponentClass /> to call its render method. <MyComponentClass /> will call its render method, which will return the JSX element <h1>Hello world</h1> . ReactDOM.render() will then take that resulting JSX element, and add it to the virtual DOM. This will make “Hello world” appear on the screen.

And when it comes to components rendering components, the explanation is simply

" When a component renders another component, what happens is very similar to what happens when ReactDOM.render() renders a component."

class ProfilePage extends React.Component {
  render() {
    return (
      <div>
        <NavBar />
        <h1>All About Me!</h1>
        <p>I like movies and blah blah blah blah blah</p>
        <img src="https://content.codecademy.com/courses/React/react_photo-monkeyselfie.jpg" />
      </div>
    );
  }
}

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

So following that logic, I can only assume that first, ReactDOM.render() tells the <ProfilePage /> component to call it’s render method, and THEN <ProfilePage /> tells the <NavBar /> component to call it’s render method. Let me know if I’ve misunderstood this