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.

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

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

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