Syntax React: code without wrapping <div>

Question

How can I rewrite my code without wrapping div?

{ allItems.map(item => (
    <div>
        { item === 2 &&
        <li className="page-item">
            <span className="page-link">...</span>
        </li>
        }
        <li className="page-item">
            <span className="page-link">{item}</span>
        </li>
    </div>
))}

Answer 1

In React 16+, you could do it with Fragments:

In the first release, the Fragments were done by returning an Array:

{ allItems.map(item => [
    { item === 2 &&
    <li className="page-item">
        <span className="page-link">...</span>
    </li>
    }
    <li className="page-item">
        <span className="page-link">{item}</span>
    </li>
])}

From React 16.2+, you could use the Fragments as follows:

const Fragment = React.Fragment

{ allItems.map(item => (
    <Fragment>
        { item === 2 &&
        <li className="page-item">
            <span className="page-link">...</span>
        </li>
        }
        <li className="page-item">
            <span className="page-link">{item}</span>
        </li>
    </Fragment>
))}

Also there's a shorthand syntax, using an empty tag:

const Fragment = React.Fragment

{ allItems.map(item => (
    <>
        { item === 2 &&
        <li className="page-item">
            <span className="page-link">...</span>
        </li>
        }
        <li className="page-item">
            <span className="page-link">{item}</span>
        </li>
    </>
))}

Credits.

Answer 2

Short syntax for <React.Fragment> is just empty tag; <> </>