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.