在reactJs中显示引导程序模态

Question

I am trying to display a bootstrap modal in my reactJs project. I have buttons with different IDs with different content displayed in a map function. I want the each modal content to correspond to the ID of the button clicked. I am following this examaple - https://react-bootstrap.github.io/components/modal/ but there is no way to specify the id here.

How do I resolve this?

Answer 1

At button, you can pass content to onClick and set it to state

handleShow = (data) => {
    this.setState({ show: true, title: data.title });
  }
render() {
return (
<div>
{
listData.map((data, index) => {
   return (
       <Button key={index} bsStyle="primary" bsSize="large" onClick={() => this.handleShow(data)}>
          Launch demo modal
       </Button>
   );
})
}
</div>
<Modal show={this.state.show} onHide={this.handleClose}>
    <Modal.Body>
        {this.state.title}
    </Modal.Body>
</Modal>