Fragments declared with the explicit syntax may have keys. A use case for this is mapping a collection to an array of fragments — for example, to create a description list:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}
Fragments solve this problem.

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>        <td>Hello</td>
        <td>World</td>
      </React.Fragment>    );
  }
}
There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:

class Columns extends React.Component {
  render() {
    return (
      <>        <td>Hello</td>
        <td>World</td>
      </>    );
  }
}
which results in a correct output of:
<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

<BrowserRouter>
    <div className='App'>
        <MainHeader />
        <Route exact path='/' render={props => (
            <React.Fragment>
                <Homepage/>
                <Placeholder/>
            </React.Fragment>
        )}/>
        <Route path='/placeholder' component={Placeholder} />
        <Route path='/address_checker' component={Address_Checker} />
        <Route path='/availability_checker' component={Availability_Checker} />
        <Route path='/usage_checker' component={Usage_Checker} />
        <Route path='/device_checker' component={Device_Checker} />
        <Route path='/payment_checker' component={Payment_Checker} />
        <Route path='/result' component={Result} />

        <Route path='/login' component={Login} />
    </div>
</BrowserRouter>

And then the usage would look like this:


function App() {
  return (
    <HeaderProvider>
      <div className="App">
        <HeaderPlacement />
        <Page />
      </div>
    </HeaderProvider>
  );
}

function Page() {
  return (
    <React.Fragment>
      <HeaderPortal><h1>Page A Test</h1></HeaderPortal>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ex odio,
        eleifend in consequat nec, maximus lobortis ligula. Duis elementum, diam
        et imperdiet pulvinar, nulla ligula commodo elit, ac ullamcorper justo
        mauris quis velit. 
      </div>
    </React.Fragment>
  );
}

2) Pass PageContent as a prop to a component:


import PageContent from './PageContent';

export default class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Child1 content={PageContent} />
        <Child2 content={PageContent} />
      </React.Fragment>
    )
  }
}

// Usage

export default class Child1 extends React.Component {
  render () {
    const PageContent = this.props.content;
    return (
      <PageContent>
        I'm wrapped in PageContent!
      </PageContent>
    )
  }
}

export default class Child2 extends React.Component {
  render () {
    const PageContent = this.props.content;
    return (
      <PageContent>
        I'm wrapped in PageContent!
      </PageContent>
    )
  }
}

Your mistake is using the if statement inside the return. You can just use the expression itself like the following


export default function SidenavButtons(props) {
    const [modalShow, setModalShow] = React.useState(false);

    return (
        <React.Fragment>

            <a class="dropdown-item" onClick={() => {setModalShow(true)}}>{props.usage}</a>
                {props.usage === "post" && modalShow &&
                    <CreatePostModal
                        show={modalShow}
                        onHide={() => setModalShow(false)}
                        modelUsage={props.usage}
                    />
                }
                {props.usage === "tweet" && modalShow &&
                    <CreateTweetModal
                        show={modalShow}
                        onHide={() => setModalShow(false)}
                        modelUsage={props.usage}
                    />
                }
                {props.usage === "tiktok" && modalShow &&
                    <CreateTiktokModal
                        show={modalShow}
                        onHide={() => setModalShow(false)}
                        modelUsage={props.usage}
                    />
                }
            }

        </React.Fragment>
    )
}

The following code will work


export default props => {

    // please keep it undefined here to not make useScrollTrigger throw an error on first render 
    const [scrollTarget, setScrollTarget] = useState(undefined) 
    const scrollTrigger = useScrollTrigger({ target: scrollTarget });

    return (
        <React.Fragment>
            <CustomHeader shrink={scrollTrigger} />

            <div ref={node => {
                if (node) {
                    setScrollTarget(node);
                }
            }}>
                {props.children}
            </div>
        </React.Fragment>
    );
};

and all component usage should be returned from render. then only react knows what to render.


import React from 'react'
import { withRouter, Redirect } from 'react-router-dom';

class App extends React.Component {

render() {
if (this.state.toLogin && !this.state.mounted) {
  return (
    <React.Fragment>
      <Route exact path="/Login" component={Login} /> 
      <Route exact strict path="/" render={({location}) => {
          if (location.pathname === window.location.pathname) {
              return <Redirect to="/Login"/>;
          }
          return null;
      }} />
  </React.Fragment>
  );
}

return (
  <div className="App">
    <ReactCSSTransitionGroup
        transitionName="remove"
        transitionEnterTimeout={100}
        transitionLeaveTimeout={100}>
            {child}
    </ReactCSSTransitionGroup>
</div>
)}

}
export default withRouter(App)

Recommend

React Fragments Usage Short Syntax

React Fragments Usage

React Fragments Motivation

React Fragments

React Without JSX

React Lists and Keys Keys Embedding map() in JSX

React Lists and Keys Keys Keys Must Only Be Unique Among Siblings

React Lists and Keys Keys Extracting Components with Keys

React Lists and Keys Keys

React Lists and Keys Basic List Component

React Lists and Keys Rendering Multiple Components

React Lists and Keys

React Integrating with Other Libraries Integrating with Model Layers Extracting Data from Backbone Models

Integrating with Other Libraries Integrating with Model Layers Using Backbone Models in React Components

Integrating with Other Libraries Integrating with Other View Libraries Embedding React in a Backbone View

Integrating with Other Libraries Integrating with Other View Libraries Replacing String-Based Rendering with React

React Integrating with Other Libraries Integrating with DOM Manipulation Plugins Integrating with jQuery Chosen Plugin

React Integrating with Other Libraries Integrating with DOM Manipulation Plugins How to Approach the Problem

React Components and Props Props are Read-Only

React Components and Props Extracting Components

React Components and Props Composing Components

React Components and Props Rendering a Component

React Components and Props Function and Class Components

React Without ES6 Mixins

React Without ES6 Autobinding

React Without ES6 Setting the Initial State

React Without ES6 Declaring Default Props

React Without ES6

React Babel, JSX, and Build Steps How can I write comments in JSX?

React Styling and CSS How do I add CSS classes to components?

React JSX In Depth Children in JSX Booleans, Null, and Undefined Are Ignored

React JSX In Depth Children in JSX Functions as Children

React JSX In Depth Children in JSX JavaScript Expressions as Children

React JSX In Depth Children in JSX JSX Children

React JSX In Depth Children in JSX String Literals

React JSX In Depth Props in JSX Spread Attributes

React JSX In Depth Props in JSX Props Default to “True”

React JSX In Depth Props in JSX String Literals

React JSX In Depth Props in JSX JavaScript Expressions as Props

JSX In Depth Specifying The React Element Type Choosing the Type at Runtime

JSX In Depth Specifying The React Element Type User-Defined Components Must Be Capitalized

JSX In Depth Specifying The React Element Type Using Dot Notation for JSX Type

JSX In Depth Specifying The React Element Type React Must Be in Scope

React JSX In Depth

React Reconciliation The Diffing Algorithm Keys

React Reconciliation The Diffing Algorithm Recursing On Children