Advanced React Patterns With Hooks/

...

/

Example: Building an Expandable Component

Example: Building an Expandable Component

In this lesson, we will set up an expandable component that is based on the compound component pattern

We'll cover the following...

What is an Expandable Component?

We’ll be building an Expandable component. It will have a clickable header that toggles the display of an associated body of content.

Designing the API

It’s usually a good idea to write out what the exposed API of your component would look like before building it out.

In this case, here’s what we’re going for:

<Expandable>
	<Expandable.Header> Header </Expandable.Header>
 	<Expandable.Icon/>
    <Expandable.Body> This is the content </Expandable.Body>
</Expandable>

In the code block above, you’ll notice I have used expressions like this: Expandable.Header

You can do this as well:

<Expandable>
	<Header> Header </Header>
 	<Icon/>
    <Body> This is the content </Body>
</Expandable>

It doesn’t matter which way as either way works. I have chosen Expandable.Header over Header as a matter of personal preference. I find that it communicates dependency on the ...