Now,
there still are two last things that could
be improved here regarding the accordion component.
And the first thing that could be improved is that we have
to set that idea on both the title and the content.
It would be nicer if we would just have to set it once on the item
and that item would then pass it down to the title and content.
Now, we can't do that with help of props because the accordion item component
which is meant to receive that ID doesn't have direct access to its Children.
It just forwards them between those list item tags.
We're not outputting them as components here in that component.
But we can of course, again, use context as a solution here,
we can create another piece of context here
and that would be the accordion item context in this case.
And here it's a super simple local context which will only be needed
by a few components that are wrapped by one specific accordion item.
So inside of the accordion item component,
we can return
accordion item context dot provider
and the value I wanna provide here will not be dynamic at all.
Instead the value I wanna set on this provider component
will simply be that ID that's received on accordion item
so that components wrapped by this accordion item will
be able to access that ID through the context.
Now, for that, I'll again add a custom hook,
use accordion item context
so that we can safely extract that context with help of the built in use context hook
using that accordion,
I had a typo there.
So that should be a
core
Dion item context provider
like this.
And then using that here
to select that context.
And then of course, we want to return it. But
in between, we want to check if it's maybe undefined.
So if we use some component that uses this hook in the future
outside of an accordion item,
so not wrapped by such an accordion item, which would not work.
So we want to check if the context is maybe not defined.
And in that case, I wanna throw a new error again
to make sure that we're not doing that
where I wanna say
accordion
item
related components
must be wrapped by
accordion dot item
like this.
Well, and now we can go to the accordion title component
and remove that ID prop here
and instead use the accordion item context which we just added,
import it from the accordion item
JSX file
to get the idea of the item this title belongs to.
And we can do exactly the same in accordion content,
get rid of the ID prop,
use our custom accordion item context
function, our custom hook here
and get the ID.
And with all that back in app Js X,
we can indeed remove the ID from title and content
and instead only add it on the accordion item
here for the local guides and also here
for the experience.
So remove this ID from title and content
and instead add it to the item.
And with that done, if you save everything and reload, this still works as before
without any errors.
But now with a better developer experience where we only have to set the idea once
and it will behind the scenes be consumed by all the components that need that idea.
Now we're pretty much done with this compound components pattern here
and there is just one last potential improvement I want to implement here,
something you don't have to do, but something I wanna do here
because at the moment, we are of course,
grouping all those accordion components into that accordion function object.
And that's great because that makes it very clear that these
components are meant to be used in conjunction with accordion.
But at the moment, it's also
theoretically possible
to import accordion title like this and use it like this.
And then it might not be that clear that it should be inside of an accordion.
Now,
you could say that it is clear and you could of
course also be the only developer working on this project.
In which case, it's clear to you.
But if you want to be super safe that those
components never get used outside of the accordion context,
or if you wanna at least make it as clear
as possible that they should be used in conjunction,
you could of course grab all those components
and merge them all into one single file so that
you don't have to export those individual accordion components.
I won't do that here because I wanna keep that code separated
to make it as easy to read and understand as possible.
But I wanted to mention this here that this is something you could do if
you wanna make sure that those components can
only be accessed through the accordion component,
function object and not on their own
here. I'll not do it though.