Javascript 单击时反应条件渲染

我在文章HTML标签中有一个诗歌标题和图像列表。每当用户点击一篇文章时，我想要一个模态来显示诗句。到目前为止，只要点击一篇文章，每首诗的情态词都会打开。如何一次打开一个情态动词？这是我第一次使用React

链接到我的代码沙盒：

---

您需要将每一张诗卡分离成一个组件，并将状态放在其中。 通过像您所做的那个样在父组件上使用状态，它会导致所有的卡都依赖于相同的状态

我已经把你的代码沙盒叉了起来，把它们修好了。你可以查一下

---

您在

Poems

组件中使用了一个

show

变量。
这不允许显示一个模态，因为所有模态都引用到同一个变量

我会使用

Poems

状态中的整数，而不是布尔值

show

，来存储当前呈现的模式。
这个整数的最佳选项可能是诗的索引，关于

map

函数：

const listItems = data.map((poem, index) => (
    <React.Fragment key={index}>
        // The rest of your code is the same

        <Modal
          show={this.state.currentModal === index} // only this property was updated
          onClose={this.showModal}
          title={poem.title}
        >
            // modal code
        </Modal>
    </React.Fragment>
))

const list items=data.map（（诗，索引）=>(
//代码的其余部分是相同的
//模态码
))