React component formatting - div not closing - html

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!

Answer 1

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>.