Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Render a Different HTML Element as the `<TransitionGroup>` Container Element

    reactReact
    ^16.0.0

    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.

    Code

    Code

    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.