CODEWITHSUNDEEP
javascriptcssreactjsreact-bootstrap
jennie
jennie

Reputation: 33

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

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;

Upvotes: 1

Views: 3346

Answers (2)

Henry
Henry

Reputation: 15701

From the error message:

Adjacent JSX elements must be wrapped in an enclosing tag

This means that a component 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>
)

Upvotes: 4

Jacob
Jacob

Reputation: 78890

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.

Upvotes: 6

Related Questions