Javascript 在Reactjs中的新行上显示每个数组项

在一个项目上工作。值得注意的是，我是一名大学生，对此反应很新。部分代码包含可以像按钮一样单击的图像。单击后，将打开一个react模态元素，并在其中显示数组的内容

如上图所示，每个数组项都以不同的数字开头。问题是所有数组元素都打印在一条连续线上，每个元素之间没有间距

下面是模态函数的代码

<button className="space boxButton button3" onClick={this.openGreenModal}>
  <img className="boxImg" src={greenBox} />
  <div onClick={e => e.stopPropagation()}>
    <Modal className="ModalGreen" isOpen={this.state.greenVisible}>
      <div>
        <img className="boxImgPopUp" src={greenBox} />
        <h1> Green box testing</h1>
        //PRINTING ARRAY ITEMS ON THIS LINE
        <p>Items: {this.state.greenArray}</p>
        <button onClick={this.closeGreenModal}>Close</button>
      </div>
    </Modal>
  </div>
</button>;

e、 stopPropagation（）}>
绿盒测试
//在此行打印数组项
项目：{this.state.greenArray}

接近
;

是否有一种方法可以将每个项目显示在新行上

如果项目需要更多代码，请务必让我知道

搜索“react渲染列表”，请将我放入react文档中，以了解此类内容：

不过，要给出一个实际的答案，React只是为您创建HTML，所以您可能希望创建HTML标记，以便在不同的行上呈现项目，就像手动创建HTML一样

比如：

{this.state.greenArray.map((item) =>
  <p key={item.something_unique}>{item}<p>
)}

{this.state.greenArray.map（（项）=>
{item}
)}

如果

此.state.greenArray

不是数组怎么办？如果它是某种CSV字符串值呢？问题是关于数组的问题。如果你想处理一些其他的价值，首先把它变成一个可接受的东西。也许是用split（）。嘿，Callum！对“打印数组项”没有任何反应。您需要将每个数组项包装为您选择的html标记。对它使用array.map，就像

greenArray.map（v=>{v}
）

@OlegPro正是我想要的谢谢！