I am trying to render multiple react-bootsrap modals with map but I am unable to do so. With my current code clicking the 'View Details' button is activating all the modals at the same time instead of opening the relevant modal. Here's a snippet from my code related to the modal:
render() {
const { accounts } = this.props;
const displayAccounts = Object.keys(accounts).filter(key => {
return accounts[key].info.type === 'student'
}).map(key => {
return (
<tr key={key}>
<th>{accounts[key].info.name}</th>
<td>{accounts[key].info.email}</td>
<td><Button bsStyle='danger' onClick={() => this.props.removeAccount(key)}>Remove Account</Button></td>
<td>
<ButtonToolbar>
<Button id={key} bsStyle="primary" onClick={this.showModal}>View Details</Button>
<Modal
id={key}
show={this.state.show}
onHide={this.hideModal}
>
<Modal.Header closeButton>
<Modal.Title>Student Details</Modal.Title>
</Modal.Header>
<Modal.Body>
<Table responsive striped hover>
<thead>
<tr>
<th>Title</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<th>Name</th>
<td>{accounts[key].userDetails.name}</td>
</tr>
<tr>
<th>Education</th>
<td>{accounts[key].userDetails.education}</td>
</tr>
<tr>
<th>GPA</th>
<td>{accounts[key].userDetails.gpa}</td>
</tr>
<tr>
<th>Skills</th>
<td>{accounts[key].userDetails.skills}</td>
</tr>
<tr>
<th>Overview</th>
<td>{accounts[key].userDetails.skills}</td>
</tr>
</tbody>
</Table>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.hideModal}>Close</Button>
</Modal.Footer>
</Modal>
</ButtonToolbar>
</td>
</tr>
)
})