Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

Question

While im building react route for my react app The Error show up

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag.

Below is my code

class App extends Component {
  render () {
    return (
      //Make App Running within Browser Router//
      <BrowserRouter> 
        <div className="navbar">
          <Navbar />
          <Route exact path='/' component={Home} />
          <Route path='/chat' component={Chat} />
          <Route path='/about' component={About} />
        </div>
      </BrowserRouter>

      <div className="main-container"> **==> This is when problem show**
        <Searchapp />
      </div>
    );
  }
}

export default App;

Thanks

Answer 1

You must encapsulate the JSX with a parent node. You can make use of a div element or if you don't want to add an extra element in the DOM, you can make use of React Fragment <>

class App extends Component {
  render () {
    return (
      <>
      <BrowserRouter> 
        <div className="navbar">
          <Navbar />
          <Route exact path='/' component={Home} />
          <Route path='/chat' component={Chat} />
          <Route path='/about' component={About} />
        </div>
      </BrowserRouter>

      <div className="main-container"> **==> This is when problem show**
        <Searchapp />
      </div>
      </>
    );
  }
}

export default App;

Answer 2

We are not allowed to assign multiple JSX elements to a single variable, not valid JavaScript syntax.

You are trying to place some sibling elements next to each other but you have to have a single outside tag, but what if adding an extra <div> tag throws off your styling?

So what the previous answer offered is called React.Fragment which is a JSX looking element that will allow you to assign multiple elements to a single variable but when rendered to a screen it will not produce any visible element to the DOM.

It would look something like this:

const ObjectDelete = () => {
  const actions = (
    <React.Fragment>
      <button className="ui button negative">Delete</button>
      <button className="ui button">Cancel</button>
    </React.Fragment>
  );

which is basically the long form which can be shortened like so:

const ObjectDelete = () => {
  const actions = (
    <>
      <button className="ui button negative">Delete</button>
      <button className="ui button">Cancel</button>
    </>
  );

Or if it's more helpful for you since you presented a class component:

class ObjectDelete extends React.Component {
  renderActions() {
    return (
      <React.Fragment>
        <button className="ui button negative">Delete</button>
        <button className="ui button">Cancel</button>
      </React.Fragment>
    );
  }

Make note that at this point the JSX with <React.Fragment> is enclosed inside a helper function.