Issue with React Strap Alert box not closing individually-CodePudding

I wanted to close each alert box when click on X close button of each, here all alert boxes closing together while single click, Please help

<Alert
        variant="danger"
        show={show}
        dismissible
        onClose={() => setShow(false)}
      >
        <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
        <p>Duis mollis, est non commodo</p>
      </Alert>
      <Alert
        variant="info"
        show={show}
        dismissible
        onClose={() => setShow(false)}
      >
        <Alert.Heading>Oh snap! You got an Alert Message!</Alert.Heading>
        <p>Duis mollis, est non commodo</p>
      </Alert>
      <Alert
        variant="info"
        show={show}
        dismissible
        onClose={() => setShow(false)}
      >
        <Alert.Heading>Oh snap! You got an Alert Message !</Alert.Heading>
        <p>Duis mollis, est non commodo</p>
      </Alert>

CodePudding user response：

You are reusing one state for all Alerts. Create such a state, that can handle every Alert separately. For example give every Alert an id. Then create a state like this:

{ 
    1: true,
    2: true,
    3: true
}

Finally on close:

const handleClose = (alertId) =>
    setShow((prev) => { return { ...prev, [alertId]: false };
});

https://codesandbox.io/s/alert-on-load-without-button-forked-3j4d87