Adjacent JSX Elements Must Be Wrapped In An Enclosing Tag – How To Fix It?

Adjacent Jsx Elements Must Be Wrapped In An Enclosing Tag – How To Fix It?

Are you having hassle with the issue “adjacent JSX elements must be wrapped in an enclosing tag”? Don’t fear! In this text, we gives you some data in regards to the cause of this error and a few options to repair it. Read on it now.

How does the issue adjacent JSX elements must be wrapped in an enclosing tag” happen?

In the React library in case you are utilizing quite a few HTML components inside a render methodology, you’re going to get the next error message:

Adjacent JSX components have to be wrapped in an enclosing tag

The render methodology can solely settle for a single HTML factor, which is the reason for the problem. This signifies that if you happen to use the render methodology with 2 or extra HTML gadgets consecutively, it received’t function and can show this error.

How to resolve this downside?

Solution 1: Embedding the complete HTML factor inside a single div factor

Embedding the complete HTML factor inside a single div factor is the only resolution to repair this downside. Inside a div, every part counts as a single HTML factor.

The syntax:

ReactDOM.render(
<div>
  // you need to use a couple of html 
  // factor inside a single div factor.
</div>,
  doc.getElementById("root)
 );

Look on the following code to know extra about this methodology:

import React from 'react';
import ReactDOM from 'react-dom';  

ReactDOM.render(  
  <div>  
  <h1>Geeks For Geeks</h1>    

<p>Learn Programming </p>    
  
  </div>,  
  doc.getElementById('root')
);

The h1> and p> tags are enclosed in a single div HTML factor. Inside a div, every part counts as a single HTML factor, so that you obtain the specified consequence with none errors.

READ :  How to Solve Python ModuleNotFoundError: no module named ‘mako’

Solution 2: Utilizing React.Fragment

Utilizing React.Fragment is also an answer for this error. However, you mustn’t generate an additional DOM factor. This signifies that that you must preserve a clear markup. React.Fragment additionally might be discovered within the some kinds under:

import React, { Fragment } from 'react'

// Using solely <Fragment />
const App = () => {
    return (
        <Fragment>
            <h1>Why returning a number of components from React is invalid.</h1>
            <h2>Common React errors</h2>
        </Fragment>
    )
}

// Using a shorthand syntax
const App = () => {
    return (
        <>
            <h1>Why returning a number of components from React is invalid.</h1>
            <h2>Common React errors</h2>
        </>
    )
}

Ensure to keep up consistency all through your codebase whatever the format you choose.

Solution 3: Returning an array (just for React 16.0+)

React Components can now return arrays as of React model 16. It shouldn’t be much like the earlier variations of React, which require you to wrap each sibling part in a mother or father part.

To put it one other approach, now you are able to do the next:

render() {   return [<p key={0}>foo</p>, <p key={1}>bar</p>]; }

This interprets into:

return [React.createElement("p", {key: 0}, "foo"), 
React.createElement("p", {key: 1}, "bar")];

Keep in thoughts that the previous returns an array. Since React model 16 and later, arrays are acknowledged as legitimate React Elements. However, arrays are invalid return objects in earlier variations of React.

READ :  How to Iterate Through a Vector in C++

The under additionally shouldn’t be legitimate (it’s essential to return an array), so let’s take be aware:

render() {   return (<p>foo</p> <p>bar</p>); }

Conclusion

We imagine you get pleasure from our article about “adjacent JSX elements must be wrapped in an enclosing tag”. What is one of the best resolution for you? Let’s us know by leaving your remark under. If you might have any questions or issues, let’s contact us. UnliHow is prepared that will help you. Thank you for studying!

Read extra

Solving “‘React’ must be in scope when using JSX react/react-in-jsx-scope” Error

How to bypass warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any

We Are Going To Discuss About How to bypass warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any. So lets Start this Article. How to...
Avatar Of Budi Setiawan Budi Setiawan
1 min read

Woocommerce Stripe No such source: ‘src_1HSDYbGnTdOaP0tZcjziW81K’ Error

We Are Going To Discuss About Woocommerce Stripe No such supply: ‘src_1HSDYbGnTdOaP0tZcjziW81K’ Error. So lets Start this Article. Woocommerce Stripe No such supply: ‘src_1HSDYbGnTdOaP0tZcjziW81K’...
Avatar Of Budi Setiawan Budi Setiawan
38 sec read

Leave a Reply

Your email address will not be published.