I am trying to build a react app with bootstrap that will showcase the cards that's like C.C.C. as display as 3 in a row and there's 3 rows, but I get this error:

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

Here is the code:

import React from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

function App() {
  return (
    <Card>
      <Card.Img variant="top"
        src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>
          This is a wider card with supporting text below as a natural lead - in to
        additional content.This content is a little bit longer.
        </Card.Text>
      </Card.Body>
    </Card>
    <Card>
      <Card.Img variant="top" src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>
          This card has supporting text below as a natural lead - in to additional
        content. {' '}
        </Card.Text>
      </Card.Body>
    </Card>
    <Card>
      <Card.Img variant="top"
        src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>123</Card.Text>
      </Card.Body>
    </Card>
  );
}

export default App;

I am trying to build a react app with bootstrap that will showcase the cards that's like C.C.C. as display as 3 in a row and there's 3 rows, but I get this error:

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

Here is the code:

import React from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

function App() {
  return (
    <Card>
      <Card.Img variant="top"
        src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>
          This is a wider card with supporting text below as a natural lead - in to
        additional content.This content is a little bit longer.
        </Card.Text>
      </Card.Body>
    </Card>
    <Card>
      <Card.Img variant="top" src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>
          This card has supporting text below as a natural lead - in to additional
        content. {' '}
        </Card.Text>
      </Card.Body>
    </Card>
    <Card>
      <Card.Img variant="top"
        src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>123</Card.Text>
      </Card.Body>
    </Card>
  );
}

export default App;

• javascript
• css
• reactjs
• react-bootstrap

Share Improve this question Follow edited Feb 24, 2020 at 22:26 Brian Thompson 14.4k44 gold badges2727 silver badges4949 bronze badges asked Feb 24, 2020 at 22:12 jenniejennie 3333 silver badges99 bronze badges 1

• 3 Does this answer your question? Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag – Brian Thompson Commented Feb 24, 2020 at 22:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

As the error says, you have a syntax error. Your function (every function in JavaScript) can only return a single value. If you expand what the JSX syntax does, your function is currently doing something like this:

return (
  React.createElement(Card, ...)
  React.createElement(Card, ...)
  React.createElement(Card, ...)
)

...which is not valid syntax. You need to either wrap those <Card/> elements in a container element or do what the error suggests, using a React fragment:

return (
  <>
    <Card .../>
    <Card .../>
    <Card .../>
  </>
);

A fragment has the benefit of being a single value while not adding the cost of an extraneous DOM element.

From the error message:

Adjacent JSX elements must be wrapped in an enclosing tag

This means that a ponent cannot return multiple JSX elements, only a single JSX element (which may have multiple children and descendants).

Currently, you have the basic structure:

return (
    <Card>...</Card>
    <Card>...</Card>
    <Card>...</Card>
)

As the message goes on to state:

Did you want a JSX fragment <>...< />?

So you can fix this with:

return (
    <>
        <Card>...</Card>
        <Card>...</Card>
        <Card>...</Card>
    </>
)

or

return (
    <React.Fragment>
        <Card>...</Card>
        <Card>...</Card>
        <Card>...</Card>
    </React.Fragment>
)