Multiple modal in a react component

Question

I am doing a mapping for different products and each product have a "report" button. Once the button is pressed, a modal pops up and shows the relevant details of the product. But when I click on any of the "report" button, all the other modals are triggered at well. I am not retrieving the right details. It should only be on that one particular product that i clicked on. I have tried researching on here and found similar questions but still can't seem to understand. Can someone help me? This are my codes https://codesandbox.io/s/small-wildflower-o3vfy

This is my array of states:

    this.state = {
  reportModalShow: [false, false],
};
 let reportModalClose = (key) => {
  this.state.reportModalShow[key] = false;
};
  {this.props.custOrders.map((custOrder, key) => {
      return (
              
                  <Button
                    variant="danger"
                    style={{ marginLeft: 5 }}
                    onClick={() => {
                      console.log("Report Button Clicked");
                      let tmp = this.state.reportModalShow;
                      tmp[key] = !tmp[key];
                      this.setState({ reportModalShow: tmp });
                    }}
                  >
                    Report
                  </Button>
                  <ReportModal
                    show={this.state.reportModalShow[key]}
                    key={key}
                    onHide={reportModalClose}
                    order={custOrder}
                    orders={this.props.custOrders}
                    orderItems={this.props.custOrderItems}
                  />
                </ButtonToolbar>

This is my Modal:

  <Modal
    show={this.props.show}
    size="lg"
    aria-labelledby="contained-modal-title-vcenter"
    centered
  >
    <Modal.Header closeButton onClick={this.props.onHide}>
      <Modal.Title id="contained-modal-title-vcenter">
        Report an Issue
      </Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <FormControl component="fieldset" style={{ marginTop: 10 }}>
        {/* <FormLabel component="legend">Issue Type </FormLabel> */}
        <RadioGroup
          aria-label="account"
          name="account1"
          value={this.state.issueType}
          onChange={this.handleChange}
        >
          <FormControlLabel
            value="missingItem"
            control={<Radio />}
            label="Missing Items"
          />
          <FormControlLabel
            value="incorrectOrder"
            control={<Radio />}
            label="Incorrect Order"
          />
      
          />
        </RadioGroup>
      </FormControl>
    </Modal.Body>
    <Modal.Footer>
      <Button variant="danger"   onClick={this.props.onHide(this.props.key)}>
        Cancel
      </Button>
      <Button onClick={this.report}>Report</Button>
    </Modal.Footer>
  </Modal>

Answer 1

You should change some part of your code. First of all, when user click on cancel or close button, you need to change the current modal's state with index. It can be done with a shallow copy from reportModalShow:

  reportModalClose = (event, key) => {
    let reportModalShow = [...this.state.reportModalShow];
    reportModalShow[key] = false;
    this.setState({ ...this.state, reportModalShow }, () => {
      console.log(this.state);
    });
  };

Also in onHide event of ReportModal, you didn't send the index parameter of current modal. So you need to change it to :

onHide={(e) => {
     this.reportModalClose(e, key);
}}

At the end, change the onClick event of close and cancel button to in Modal.jsx to:

onClick={(event) => this.props.onHide(event)}