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

Already subscribed? Sign In

Autoplay

    Render Multiple Elements using React.Fragment and the JSX Fragment Syntax <> in React 16.2

    Nik GrafNik Graf

    With React 16 it is possible now to return an Array of elements.

    In React 16.2 support for fragments was added. It's a convenient way to return multiple children from a component’s render method.

    reactReact
    ^16.0.0
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    Instructor: 00:00 You can see an app rendering a list of fruits. We can extend this list using a fruits' component returning an array.

    00:17 In React 16.2, the Fragment component was added. We can access it using React.Fragment, and use it to wrap a set of elements.

    00:28 When using Fragment, no DOM element is rendered, and behaves as if your work return an array of elements. One definite benefit here is that you can omit the keys.

    00:41 As you can see, all fruits show up. By inspecting the DOM, we can see all of them are rendered inside the same unordered list element. If desired, we can also import Fragment from React and use it directly.

    00:58 To make the offering experience as convenient as possible, the reacting addicts from tactical sugar for Fragment to JSX, since that of using React.Fragment, or importing it, we can simply use this syntax. Same as our shell before, since it automatically desugars to React.Fragment.

    01:17 In case you need a kit Fragment, we have to use Fragment directly. You define a glossary component, rendering for each item, a pair of HTML elements -- dt and td. To avoid wrapping elements like a div, we use a fragment. Because we provide a key, we have to type out "Fragment."

    Discuss

    Discuss