Html 反应组件格式-div未关闭

如果这是直截了当的，我道歉。我遵循一个教程，似乎有语法错误。我无法找到以下内容的正确格式：

    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>
    );
  }
}

const productsToDisplay=this.props.shopData.shop.products
返回(
{productsToDisplay.edges.map（（el，i）=>{
返回(
)
})}
);
}
}

上述div无法识别收尾产品标签下的两个div，因为第一个div表示未收尾

我相信这是由于返回语句中的存在和它之外的存在——但我不清楚这应该如何格式化

参考：

错误：解析错误：相邻的JSX元素必须包装在封闭标记中。你想要一个JSX片段吗

---

感谢您的帮助

有两个问题。本教程将按如下方式导入产品：

import Product from './Product.js';

但随后教程将其引用为

{
返回(
)
})}
);

---

---

感谢@RyanCogswell注意到了

中大写p的另一个问题，该教程中除了Andrew指出的语法错误外，还有其他语法错误（例如<代码>是的，我正在学习困难的方法。谢谢，这真的解决了我的另一个问题。哈哈。杰瑞格斯威尔。我可以把这一点加在我的回答上吗？还是你更愿意把它贴在我自己的答案上，这样我就可以把你的答案加上1，同时更新我的答案。干杯。我正在编辑你的答案，把它包括进去。谢谢，我试过了。由于数据没有出现，我想我弄错了。注意到这一定是另一个问题。谢谢，我会接受。这很奇怪。你能在

console.log（productsToDisplay）；

下面添加这一行：

const productsToDisplay=this.props.shopData.shop.products

行，然后复制粘贴到控制台中记录的内容。

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

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