What Is the Empty Tag in React?

Introduced in React v16.2.0, the empty tag (<>...</>) in react is merely a shorter syntax for explicitly declaring fragments with <React.Fragment>. For example:

// ...

const Foo = () => (
    <>
        <li>Foo</li>
        <li>Bar</li>
    </>
);

// ...

Is equivalent to:

// ...

const Foo = () => (
    <React.Fragment>
        <li>Foo</li>
        <li>Bar</li>
    </React.Fragment>
);

// ...

Although the two syntaxes are equivalent, the key difference between the two is that the shorter syntax does not allow keys (or other attributes), while the full syntax does.


Hope you found this post useful. It was published . Please show your love and support by sharing this post.