Reactstrap: Is it necessary to enclose adjacent JSX elements within a wrapping tag?

Question

Reactstrap: Is it necessary to enclose adjacent JSX elements within a wrapping tag?

While working on my React course project, I encountered an issue with my faux shopping website. The error message that keeps popping up is:

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

Below is the code snippet that should ideally work.

import React from 'react';
import ReactDOM from 'react-dom';
import Producto from './Componentes/producto';
import './App.css';
import {Container} from 'reactstrap';
import {Row} from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
      {/* Plantilla para producto disponible en producto.js */}
        <Container>
          <Row>
              <Producto 
                titulo='Doom Eternal PS4' 
                imagen='https://www.weplay.cl/pub/media/catalog/product/cache/d406ac87fd7d160c9527a5559b847e93/p/s/ps4_doom-eternal.jpg' 
                descripcion='Los ejércitos del infierno han invadido la Tierra. Ponte en la piel del Slayer en una épica campaña para un jugador y cruza dimensiones para detener la destrucción definitiva de la humanidad.' 
                precio='666'
              />
              <Producto
                  titulo='Nintendo Switch'
                  imagen='https://images-na.ssl-images-amazon.com/images/I/71ivrWiYkLL._AC_.jpg'
                  descripcion='Consola Nintendo Switch Black'
                  precio='229.000'
              />
              <Producto
                titulo='Consola SONY PS4'
                imagen='https://estaticos.elperiodico.com/resources/jpg/9/8/playstation-sony-1370947347089.jpg'
                descripcion='Consola PS4 SLIM 500GB '
                precio='199.990'
              />
              <Producto
                titulo='Consola XBOX ONE'
                imagen='https://compass-ssl.xbox.com/assets/dd/2e/dd2ef163-a130-403a-a394-a5b11c1533c8.jpg?n=Xbox-Family_Image-0_X1S-1111_496x279.jpg'
                descripcion='Consola Xbox One solo juegos digitales '
                precio='229.000'
              />
              <Producto
                titulo='Consola New Nintendo 2DS'
                imagen='https://http2.mlstatic.com/nintendo-2ds-xl-black-and-turquoise-nuevo-D_NQ_NP_615117-MLM27995821063_082018-F.jpg'
                descripcion='2DS XL Black Turqoise'
                precio='129.990'
              />
              <Producto
                titulo='Big Chungus PS4'
                imagen='https://static.wikia.nocookie.net/big-chungus/images/7/7a/AB851D95-0AA6-496D-83FC-6616222C8F01.jpeg'
                descripcion='El videojuego más del mundo'
                precio='999.999.999'
              />
          </Row>
        </Container>
  );
}

export default App;

Here's the GitHub repo, if anyone would like to run this locally.

I've experimented with various containers such as <div> and <fragment>, but none seem to resolve the issue. What am I missing here?

javascript reactjs twitter-bootstrap jsx reactstrap

Answer 1

Answer №1

I made a copy of your project and included a crucial addition. I integrated React fragments with the shorter syntax, and it functions flawlessly with <></>.

For instance, in your scenario:

function App() {
  return (
    <>
      {/* Template for product available in product.js */}
      <Container>
        <Row>
          <Product />
          <Product />
        </Row>
      </Container>
    </>
  );
}

export default App;

Your repository's App.js file.

import React from "react";
import Product from "./Components/product";
import "./App.css";
import { Container } from "reactstrap";
import { Row } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <>
      {/* Template for product available in product.js */}
      <Container>
        <Row>
          <Product
            title="Doom Eternal PS4"
            image="https://www.weplay.cl/pub/media/catalog/product/cache/d406ac87fd7d160c9527a5559b847e93/p/s/ps4_doom-eternal.jpg"
            description="The armies of hell have invaded Earth. Put yourself in the shoes of the Slayer in an epic single-player campaign and cross dimensions to stop the ultimate destruction of humanity."
            price="666"
          />
          <Product
            title="Nintendo Switch"
            image="https://images-na.ssl-images-amazon.com/images/I/71ivrWiYkLL._AC_.jpg"
            description="Nintendo Switch Black Console"
            price="229.000"
          />
          <Product
            title="SONY PS4 Console"
            image="https://estaticos.elperiodico.com/resources/jpg/9/8/playstation-sony-1370947347089.jpg"
            description="PS4 SLIM 500GB Console"
            price="199.990"
          />
          <Product
            title="XBOX ONE Console"
            image="https://compass-ssl.xbox.com/assets/dd/2e/dd2ef163-a130-403a-a394-a5b11c1533c8.jpg?n=Xbox-Family_Image-0_X1S-1111_496x279.jpg"
            description="Xbox One digital games console only"
            price="229.000"
          />
          <Product
            title="New Nintendo 2DS Console"
            image="https://http2.mlstatic.com/nintendo-2ds-xl-black-and-turquoise-nuevo-D_NQ_NP_615117-MLM27995821063_082018-F.jpg"
            description="2DS XL Black Turquoise Console"
            price="129.990"
       />
          <Product
            title="Big Chungus PS4 Game"
            image="https://static.wikia.nocookie.net/big-chungus/images/7/7a/AB851D95-0AA6-496D-83FC-6616222C8F01.jpeg"
            description="The world's most video game"
            price="999.999.999"
          />
        </Row>
      </Container>
    </>
 );

export default App;

Results displayed on VSCode terminal

https://i.stack.imgur.com/HPZBP.png

Output shown in web browser (console). I have blurred out the images for privacy reasons.

https://i.stack.imgur.com/OKUda.png

Answer 2

I made a copy of your project and included a crucial addition. I integrated React fragments with the shorter syntax, and it functions flawlessly with <></>.

For instance, in your scenario:

function App() {
  return (
    <>
      {/* Template for product available in product.js */}
      <Container>
        <Row>
          <Product />
          <Product />
        </Row>
      </Container>
    </>
  );
}

export default App;

Your repository's App.js file.

import React from "react";
import Product from "./Components/product";
import "./App.css";
import { Container } from "reactstrap";
import { Row } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <>
      {/* Template for product available in product.js */}
      <Container>
        <Row>
          <Product
            title="Doom Eternal PS4"
            image="https://www.weplay.cl/pub/media/catalog/product/cache/d406ac87fd7d160c9527a5559b847e93/p/s/ps4_doom-eternal.jpg"
            description="The armies of hell have invaded Earth. Put yourself in the shoes of the Slayer in an epic single-player campaign and cross dimensions to stop the ultimate destruction of humanity."
            price="666"
          />
          <Product
            title="Nintendo Switch"
            image="https://images-na.ssl-images-amazon.com/images/I/71ivrWiYkLL._AC_.jpg"
            description="Nintendo Switch Black Console"
            price="229.000"
          />
          <Product
            title="SONY PS4 Console"
            image="https://estaticos.elperiodico.com/resources/jpg/9/8/playstation-sony-1370947347089.jpg"
            description="PS4 SLIM 500GB Console"
            price="199.990"
          />
          <Product
            title="XBOX ONE Console"
            image="https://compass-ssl.xbox.com/assets/dd/2e/dd2ef163-a130-403a-a394-a5b11c1533c8.jpg?n=Xbox-Family_Image-0_X1S-1111_496x279.jpg"
            description="Xbox One digital games console only"
            price="229.000"
          />
          <Product
            title="New Nintendo 2DS Console"
            image="https://http2.mlstatic.com/nintendo-2ds-xl-black-and-turquoise-nuevo-D_NQ_NP_615117-MLM27995821063_082018-F.jpg"
            description="2DS XL Black Turquoise Console"
            price="129.990"
       />
          <Product
            title="Big Chungus PS4 Game"
            image="https://static.wikia.nocookie.net/big-chungus/images/7/7a/AB851D95-0AA6-496D-83FC-6616222C8F01.jpeg"
            description="The world's most video game"
            price="999.999.999"
          />
        </Row>
      </Container>
    </>
 );

export default App;

Results displayed on VSCode terminal

https://i.stack.imgur.com/HPZBP.png

Output shown in web browser (console). I have blurred out the images for privacy reasons.

https://i.stack.imgur.com/OKUda.png

Answer 3

Answer №2

The text inside the curly braces following the <Container> tag is recognized as an individual JSX element, separating it onto its own line will allow it to function properly!

<Container>
{/* Template for product available in product.js */}

Answer 4

The text inside the curly braces following the <Container> tag is recognized as an individual JSX element, separating it onto its own line will allow it to function properly!

<Container>
{/* Template for product available in product.js */}

Reactstrap: Is it necessary to enclose adjacent JSX elements within a wrapping tag?

Answer №1

Answer №2

Similar questions

Creating a personalized script in ReactJS: A step-by-step guide

React Tabulator - custom header filter for select column - hide 'X' option

Having an excess of 32 individual byte values

The console object in Chrome_browser is a powerful tool for debugging and

Encountering a "SyntaxError: Unexpected token '/' in... index.ejs while compiling ejs" issue following the recent npm package updates

Disabling ESLint errors is not possible within a React environment

Displaying the current time and total time of a custom video player using Javascript

How to automatically fill a row in ReactJS/Material-Table when a specific "lookup" or dropdown option is chosen?

Laravel Mix fails to recognize VueJs integration in Laravel

Guide to resolving a blank webpage issue post running 'npm run build'

Update the content of a div on the WordPress homepage with the click of a button

Struggling with integrating PHP within a JavaScript AJAX function

Adding the highcharts-more.src.js file to an Angular 2 project: A step-by-step guide

What could be causing this conflicting behavior with the logical "and" operator?

Ionic 2: Unveiling the Flipclock Component

What is the best way to prevent the span text from wrapping to the next line depending on the content of the previous span element using CSS?

The module 'iap_verifier' could not be located

Unraveling in jQuery

Inconsistent expansion panel widths observed in Chrome when using React material-ui

Pagination with React Material UI is a user-friendly and visually