Button click pops up all the modals instead of showing only one - reactjs

Question

I am passing data to the modal from a parent component. I show the modal on a button click. But the modal body doesn't contain the desired data. It appends all the data inside the body instead of showing only the necessary content.
This is the parent component
{this.state.response.map((value, id) => {
return (
<div className="col-md-3 file-card-viewSection">
<Button
id={id+1}
onClick={(e) => {this.setState({ showDocumentsModal: true })}}>
<i className="fas fa-eye"></i>
</Button>
</div>
<ViewDocumentDetailsModal
show={this.state.showDocumentsModal}
onHide={this.modalClose.bind(this)}
documentdata={value.result} />
);
})}
This is the child component containing the bootstrap modal
class viewDocumentDetailsModal extends Component {
render() {
console.log(this.props)
return (
<Modal
{...this.props}
size="lg"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Modal heading
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Centered Modal</h4>
<ReactJson src={this.props.documentdata} />
</Modal.Body>
<Modal.Footer>
<Button onClick={this.props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
}
When i click on the button it displays both modals at once. I am not able to figure out why. Kindly help me out. Thanks.
This is how I get the output
This is the entire parent component
{this.state.response.map((value, id) => {
return(
<div>
<Card className="mb-4">
<Card.Body className="row file-card-row">
<div className="col-md-1 file-card-index">
{id+1}
</div>
<div className="col-md-4 file-card-filename">
{value.result.Filename}
</div>
<div className="col-md-4 file-card-status">
{value.result.Status}
</div>
<div className="col-md-3 file-card-viewSection">
<Button id={id+1} onClick={(e) => {this.setState({ showDocumentsModal: true, modalOpened: id })}}>
<i className="fas fa-eye"></i>
</Button>
</div>
</Card.Body>
</Card>
</div>
);
})}
<ViewDocumentDetailsModal
show={this.state.showDocumentsModal}
onHide={this.modalClose.bind(this)}
documentdata={this.state.response[this.state.modalOpened].result}
/>
</div>

Answer 1

First, I've tried to adjust the indentation of your code (the edit has to be accepted first), but it seems to me that, in the first piece of code, you return a <div> element and <ViewDocumentDetailsModal> element without any parent component: in React that should not be possible (you should always have a single element returned, if you are in the render() method.
Anyways, I think that you retrieve more than one Modal because <ViewDocumentDetailsModal> element is returned inside the this.state.response.map() callback: this way, for each response you return a different Modal.
If in this.state.response you have data for different Modal, but you want to display just one of them, you need to have a different number property in the state, like this.state.modalOpened, in which you keep saved the index of the modal data you want to display.
Then, in the return() method, you should write something like this:
<>
{this.state.response.map((value, id) => {
return (
<div className="col-md-3 file-card-viewSection">
<Button
id={id+1}
onClick={(e) => {this.setState({ showDocumentsModal: true, modalOpened: id })}}>
<i className="fas fa-eye"></i>
</Button>
</div>
);
})}
<ViewDocumentDetailsModal
show={this.state.showDocumentsModal}
onHide={this.modalClose.bind(this)}
documentdata={this.state.response[this.state.modalOpened].result} />
</>