Workaround to add className to Fragment in React

Question

I am trying to create a stateless component in React with the sole purpose of acting as a reusable wrapper. I am also using CSS Modules because I want to have fully modular CSS.

The thing is I don't want to add unnecessary elements (and even more so <div>s), but instead I want to use React's Fragments.

Now, the problem I have is Fragment (at least for now) do not accept classNames. So if I try this:

// In Wrapper.js:

import React, { Fragment } from 'react' import styles from './Wrapper.css'  const wrapper = (props) => (     <Fragment className={styles.wrapper}>         {props.children}     </Fragment> )  export default wrapper 

In (for example) Navbar.js:

import React from 'react' import styles from './Navbar.css' import Wrapper from '../../Layout/Wrapper'  const navBar = (props) => (     <nav className={styles.navBar}>         <Wrapper>             This is the site's main navigation bar.         </Wrapper>     </nav> )  export default navBar 

Now I can of course, use a div instead of the Fragment, but is there any other workaround to avoid using unnecessary markup, of which I am totally unaware at this hour of the night? :)

Thanks in advance for any insight, recommendation, correction, or any other form of help!

Answer 1

Fragments let you group a list of children without adding extra nodes to the DOM. - https://reactjs.org/docs/fragments.html

What Fragments tries to solve its the unnecessary dom elements but this doesn't mean that Fragments will replace div entirely. If you need to add a className there, its clearl that either you add a dom element in this case another div or add the class to its parent.