React component formatting - div not closing

Question

Apologies if this is straight forward. I am following a tutorial and it seems there is a syntax error. I am unable to find the right format for the following:

    const productsToDisplay = this.props.shopData.shop.products
    return (
      <div classname="App">
        <div classname="products-grid">
          {productsToDisplay.edges.map((el, i)=> {
            return(
              <product key="{i}" product="{el.node}">
            )
          })}
        </product>
        </div>
      </div>
    );
  }
}

The two divs under the closing product tag are not recognized by the above divs, as the first one states it is unclosed.

I believe this is due to the being in the return statement, and out of it - but I am unclear how this should be formatted.

Reference: http://www.codeshopify.com/blog_posts/building-a-store-with-react-step-2

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

Any help is appreciated!

There are other syntax errors in that tutorial besides the one Andrew pointed out (e.g. ` — Ryan Cogswell, Jan 19 '19 at 19:45
@RyanCogswell Can I add that to my answer with credits to you or would you prefer posting it as an answer yourself so I can +1 yours as well as update my answer. Cheers. — AndrewL64, Jan 19 '19 at 19:58
@RyanCogswell Oh ok sweet. Do add a credit to yourself for pointing that out mate. — AndrewL64, Jan 19 '19 at 19:59

AndrewL64 · Accepted Answer · 2019-01-19T20:05:44.497

2

There are two issues. The tutorial is importing Product as follows:

import Product from './Product.js';

but then the tutorial references it later as <product when it should be <Product.

The second issue is that the closing Product tag </product> should either be inside the return statement along with the open Product tag or just use a self-closing tag like this:

{productsToDisplay.edges.map((el, i)=> {
    return(
        <Product key="{i}" product="{el.node}" />
    ) 
})}

So your complete return statement should look like this:

return (
  <div classname="App">
    <div classname="products-grid">
      {productsToDisplay.edges.map((el, i)=> {
        return(
          <Product key="{i}" product="{el.node}" />
        )
      })}
    </div>
  </div>
);

Credits to @RyanCogswell for noticing the other issue with the uppercase P in <products>.

edited Jan 19 '19 at 20:05

answered Jan 19 '19 at 19:41

AndrewL64

15,794
8
47
79

Thanks, I had tried that and since the data did not appear I figured I had it wrong. Noted it must be another issue. Thanks I will accept. – graphql-hm Jan 19 '19 at 19:53
That's weird. Can you add this line: `console.log(productsToDisplay);` below your `const productsToDisplay = this.props.shopData.shop.products` line and copy-paste here what is logged in your console. – AndrewL64 Jan 19 '19 at 19:53

React component formatting - div not closing

1 Answers1