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 Helmeth2>
Helmet>
meta charSet="utf-8" />
title>React Helper functionstitle>
meta property="og:type" content="website - tech blog" />
meta property="og:site_name" content="code sample" />
Helmet>
h2>Section 2 - React Helper functionsh2>
div>
p>React Helper functionsp>
div>
h2>Section 3 - Otherh2>
div>
p>Otherp>
div>
>
);
}
}
export default MyComponents;
