Learn how and why components render other components.

Components Render Other Components

As we've seen before, each React component is responsible for one piece of the interface. As the application grows in complexity, components need to be able to interact with each other to support the features needed.

So far, we've explored components that return JSX elements, such as:

```js
function PurchaseButton() {
  return <button onClick={()=>{alert("Purchase Complete")}}>Purchase</button>
}
```

In this example, the React component is not interacting with other components. However, you can have components interact with each other by passing information or even returning other components.

```js
function PurchaseButton() {
  return <button onClick={()=>{alert("Purchase Complete")}}>Purchase</button>
}

function ItemBox() {
  return (
    <div>
      <h1>50% Sale</h1>
      <h2>Item: Small Shirt</h2>
      <PurchaseButton />
    </div>
  );
}
```

In the above example, `ItemBox` returns an instance of `PurchaseButton`. This is an example of how a component can reference other components!

Returning Another Component

You may have noticed that you've seen this behavior before!

In the previous lessons, when we defined components and exported them. We usually exported them into our top-level file, **App.js**. Inside **App.js**, we imported components and returned them inside our `App` component—which are then exported to be rendered!

```js
import Button from './Button'

function App() {
  return <Button />;
}

export default App;
```

Look familiar? This ability allows us to separate components into smaller functions and connect them together to make more complex components! 

We can treat it as the `Button` component is a child of the parent `App` component. By breaking a component into extracted smaller components, we can reuse the individual parts when necessary. 

Apply a Component in a Render Function

Great job! You've reached the end of this brief but important lesson.

Let's recap: 
* A React application can contain multiple components.
* Components can interact with each other by returning instances of each other. 
* Components interacting allows them to be broken into smaller components, stored into separate files, and reused when necessary.

Review

A React application can contain dozens, or even hundreds, of components.

Each component might be small and relatively unremarkable on its own. When combined, however, they can form enormous, fantastically complex ecosystems of information.

In other words, React apps are made out of components, but what makes React special isn't the components themselves. What makes React special is the ways in which components *interact*.

This lesson is an introduction to *components interacting*. After this lesson, you should be familiar with:
* how components can reference other components.
* how this allows us to separate our components into separate files.