Parse Error: Adjacent JSX elements must be
wrapped in an enclosing tag!
React doesn’t like siblings. More specifically,
it doesn’t allow siblings in a return function while rendering.
We should put your component between enclosing
tags,
Wrong
ways!
import React from 'react';
class MyComponents extends React.Component {
render() {
return (
<MyComponent1/>
<MyComponent2/>
<MyComponent3/>
);
}
}
export default MyComponents;
Correct
Ways!
import React from 'react';
class MyComponents extends React.Component {
render() {
return (
<>
<MyComponent1/>
<MyComponent2/>
<MyComponent3/>
</>
);
}
}
export default MyComponents;
As
an example to resolve this issue using <> </>,
import React from 'react';
import { Helmet } from "react-helmet";
class MyComponents extends React.Component {
render() {
return (
<>
<h2>Section 1 - for React Helmet</h2>
<Helmet>
<meta charSet="utf-8" />
<title>React Helper functions</title>
<meta property="og:type" content="website - tech blog" />
<meta property="og:site_name" content="code sample" />
</Helmet>
<h2>Section 2 - React Helper functions</h2>
<div>
<p>React Helper functions</p>
</div>
<h2>Section 3 - Other</h2>
<div>
<p>Other</p>
</div>
</>
);
}
}
export default MyComponents;