Fragments

Fragments <></> allow you to group a list of children elements without adding extra nodes (like a <div>) to the DOM. This keeps the DOM tree clean and avoids breaking layouts like tables, lists, etc.

// Child component returning multiple list items without a wrapping div
export const Items = () => {
    return (
        <>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </>
    );
};

// Parent component rendering a valid HTML list structure
export const List = () => {
    return (
        <ul>
            <Items />
        </ul>
    );
};

When mapping over an array in a loop, you must use the explicit <React.Fragment key="{id}"> syntax instead of <></>, as the short syntax does not support keys or attributes.

import { Fragment } from 'react';

export const ItemList = ({ items }) => {
    return (
        <ul>
            {items.map(item => (
                // Explicit Fragment is required here to pass the 'key' prop
                <Fragment key={item.id}>
                    <li>{item.term}</li>
                    <li>{item.description}</li>
                </Fragment>
            ))}
        </ul>
    );
};