Render a Different HTML Element as the `<TransitionGroup>` Container Element
In React Transition Group, the <TransitionGroup> component uses a standard <div> as its container element. This can be changed to whichever HTML element you like. This can be very important for accessibility and maintaining DOM readability. We can also pass null as the component, which means no container element is used at all. This can be important for styling.
Instructor: [00:00] In front of us, we have a transition group component, which is mapping over our stateful favorites array and rendering a CSS transition for each one.
[00:11] It's worth noting that the transition group component renders a div. If we inspect the DOM, then we can see that this is the transition group component. However, if we don't want it to be a div, we can change which type of element gets rendered as the transition group element.
[00:34] Let's supply a practical example. Let's say these favorite divs could be list items. We'd want to put these inside an unordered list, so we could pass component equals ul. Now, let's save and refresh.
[00:50] Now, we can see that our transition group component is a ul. If we want to target this element with CSS, we can also supply a className prop. Here, we see it in the DOM.
[01:08] If we don't want an element to render at all for the transition group component, we can also pass null as the component. Now, we see no transition group component. This could be useful for certain situations, involving styling or DOM structuring.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!