Let’s consider this example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import React from 'react';

function App() {
  return (
    <h1>Hello World!</h1>
    <p>Love from India!</p>
  );
}

export default App;

When we try to execute the above code, we get the following error
Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

Wouldn’t it be easy to return multiple elements in JSX, like we do in HTML? Why are we getting this error?:

Let’s unpack this:

Behind the scenes all JSX elements gets converted to Javascript. So the unpacked code looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import React from 'react';

function App() {
  return (
    React.createElement('h1',null, "Hello World!");
    React.createElement('p', null, "Love from India!")
  );
}

export default App;

Now we get an error of:

Parsing error: Unexpected token ;

We are trying to return 2 seperate React.createElement() function calls which isn’t allowed in javascript.

Let’s look at another example in javascript:

1
2
3
4
5
6
7
8

function someFunction() {
  let arr = [1, 2, 3];

  return (
    arr.pop()
    arr.pop()
  );
}

We still get the same error Parsing error: Unexpected token ;. return statements expect only one expression slot in javascript

return arr.pop() ✅
return arr.pop() arr.pop() arr.pop() .... ❌

How can we fix it? Using FRAGMENTS

If you found this helpful, please give a shoutout to @gsavitha_ and share this article to help others. For more articles like this, subscribe to my Newsletter and get the latest updates straight to your inbox.