<> vs React.Fragment

<> is the shorthand tag for React.Fragment which allows us to group a list of elements without wrapping them in a new node.
So we can do something like
render() {
    return (
        <>
            <Header />
            <Navigation />
            <Main />
            <Footer />
        </>
    );
}
The only difference between them is that the shorthand version does not support the key attribute.
Here is a common example that inserts new line (br) tags in a multiple lines string:
{
    str.split('\n').map((item, index) => {
        return (
            <Fragment key={index}>
                {item}
                <br/>
            </Fragment>
        )
    })
}
Hit the Subscribe button for the latest news on my tools. No spam. Ever!
© 2020 Nguyen Huu Phuoc. All rights reserved