I understood the point that chaining of components can be done by having functional component in every files and importing the components at every parent level.

eg A imports B imports C

Lets say we have these 3 files App.js, Home.js and HomeContainer.js

where App imports Home imports Homecontainer

**App.js**

```
import './App.css';
import HomeContainer from './containers/HomeContainer';

function App() {
  return (
    <div className="App">
      <HomeContainer/>
    </div>
  );
}
export default App;

```

**HomeContainer.js**

```
import Home from "../components/Home";
function HomeContainer(props) {
    return (
        <div>
            <Home/>
        </div>
    )
}
export default HomeContainer

```

**Home.js**

```
import React from 'react';

function Home(props) {
    return (
        <div>
            <h1>Home</h1>
        </div>
    )
}

export default Home;

```

Up until now everything was okay but lets say instead of creating a function component for HomeContainer I exported Home component directly, I see even then it is working.

**HomeContainer.js** becomes

```
import Home from "../components/Home";
export default Home

```

I want to know how exactly this is working, because APP.js is rendering the HomeContainer component but HomeContainer component is not rendering anything like `<Home/>` but still Home component gets rendered in the APP.js.

I expected App to render first functional component HomeContainer which in turn renders Home component. But even when we don't create a functional component and directly export it, its getting rendered in App.js as Home component when our HomeComponent is not even rendering it using the command `<Home/>`

How exactly export default in `HomeComponent.js` is rendering the component `Home` in parent `App.js`