Nested composition

React encourages composition over inheritance, so when it comes to more complex UI component, let's nest compositions!

Any React component can be a composition and a composite at the same time. In this section we are going to illustrate how to apply this principle on practice, taking our previously created <Album/> component and using it as a composite of a new <AlbumsList/> component.

Albums list

Imagine there is an AlbumsList component that renders a list of albums. Conceptually, it is a composition of albums. That is all we need to know to implement it with Atomic Layout.

import React from 'react'
import { Composition } from 'atomic-layout'
// The Album component we have created in
// the previous steps of this tutorial.
import { Album } from './Album'

export const AlbumsList = ({ albums }) => (
  <Composition gap={10}>
    {albums.map((album) => (
      <Album
        key={album.id}
        title={album.title}
        releaseDate={album.releaseDate}
        artistName={album.artistName}
      />
    )}
  </Composition>
)

Notice how we are using the Composition component, but this time there are no areas involved. That's because our albums list essentially renders the same child dynamically. You can imagine the Album being the one and only area in that case. There is no need to use the areas prop for a single area, since the power of areas is in their relation, and thus, multiplicity.

The usage of the areas prop is a design decision you make. Sometimes it's beneficial, while other times it may be not.

From the API perspective, the areas prop is not required in Composition. When not provided, the composition component still acts like a display: grid parent. You can use other CSS Grid properties with it to control the layout of its children, such as templateCols or templateRows to describe columns or rows relation respectively.

Summary

In this section we have learned:

• Nesting is a crucial part of dealing with UI complexity;

• A single React component may be a composition and a composite at the same time;