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

Hi,

I am writing simple reactjs application. Here is my code:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (

        <p>Hello world! Welcome!! React Tutorials.</p>
         <div id="parent">
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>

    )
  }
}
export default App;

But it throws following error:

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

How to solve this?

Thanks

March 16, 2020 at 12:14 AM

Hi,

This error is coming because you have not included he components in a starting and ending divs.

<div>....</div>

I have changed you code and following is running code:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
        <div>
        <p>Hello world! Welcome!! React Tutorials.</p>
         <div id="parent">
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
         </div>
    )
  }
}
export default App;

Thanks