React - JSX 语法问题，以及如何迭代地图并在换行符上显示项目

我是一个 React 菜鸟，正在制作 ToDo 列表样式食谱列表应用程序 https://fcc-recipebox.surge.sh/。我有一个功能组件 Item.js，我使用 JSX 和映射函数来迭代每个配方项并显示它们。我希望每个菜谱项目都出现在新行上，但是当我使用 .map 迭代它们时，React 会将整个菜谱项目列表放入一个 p 标记中，而不是每个项目的一个 p 标记中。

如何迭代配方项并将它们显示在单独的行上？即使我尝试将它们显示为无序列表，React 也希望将每个项目放入一个 li 标记中。

这是我的代码：

import React from 'react';
import Button from 'react-bootstrap/lib/Button';


const Item = (props) => (
  <div>
    <div className="Recipe-Item-Container" key={props.text}>

        {props.items.map((item, index) => 
        <div className="Recipe-Item" key={index}>

            <h3>{item}</h3>

            <p>{props.ingredients[index]}</p>

          <div className="buttons-container">
            <Button className="edit-button" onClick={() => props.edit(item, index)}>Edit</Button>
            <Button className="delete-button" onClick={() => props.delete(item, index)}>Delete</Button>
          </div>

        </div>
      )}
    </div>
  </div>
)


export default Item;

还关于{props.items.map((item, index) => 如果我在 => 之后添加大括号，则会出现错误。我安装了 React/JSX linter，但它没有捕获任何内容。有什么问题吗？

我知道这可能是一个菜鸟错误，但 JSX 让我陷入了困境。

如果在粗箭头后添加花括号，则必须显式返回JSX.

const Item = (props) => (
  <div>
    <div className="Recipe-Item-Container" key={props.text}>

      {props.items.map((item, index) => {
          return (
              <div className="Recipe-Item" key={index}>

              <h3>{item}</h3>

              <p className="ingredients-list">
                   {props.ingredients[index].map((ingredient, ingredientIndex) => {
                      return (
                           <div className="ingredient" key={ingredient}>
                               {ingredient}
                           </div>
                     )
                   }}
              </p>

              <div className="buttons-container">
                <Button className="edit-button" onClick={() => props.edit(item, index)}>Edit</Button>
                <Button className="delete-button" onClick={() => props.delete(item, index)}>Delete</Button>
              </div>

            </div>
          )
        }
      )}
    </div>
  </div>
)