Modifiqué el código para generar una pila de tostadas en un ToastContainer dinámicamente como un sistema de notificación. Ahora el brindis no se cierra automáticamente incluso al hacer clic en el botón Cerrar.
El código se puede reproducir copiando y pegando dentro del área dimiss en https://react-bootstrap.github.io/components/toasts/
const Tsty = (props) => <> <Toast show={ props.show } delay={ 3000 } autohide> <Toast.Header> <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" /> <strong className="me-auto">{props.title}</strong> <small className="text-muted">{props.time}</small> </Toast.Header> <Toast.Body>{props.body}</Toast.Body> </Toast> </> render(<Tsty />); function Example() { const [listNtfy, setNtfy] = useState([]); const style = { position: 'fixed', bottom: '60px', right: '10px', zIndex: '1000'} return ( <> <Button onClick={() => {setNtfy([...listNtfy, {title: 'title #', time: 'now', body: new Date().toString(), show : true }])}}>Add Ntfy</Button> <ToastContainer style={style}> { listNtfy.map( (x,i) => <Tsty show={ x.show } title={x.title + i} time={x.time} body={x.body} key={i} /> ) } </ToastContainer> </> ); } render(<Example />);donde esta el error
Esto no se cierra porque Tosty hook muestra una propiedad que no está presente en el hook. Para resolverlo, puede definir la propiedad mostrar y crear una función para ocultarlo. Cuando todos los ntfys están cerrados, la lista se limpia.
const Tsty = (props) => <> <Toast show={ props.show } onClose={ () => {props.fcn(props.idx) } } delay={ 5000 } autohide> <Toast.Header> <img src="holder.js/20x20?text=Q" className="rounded me-2" alt="" /> <strong className="me-auto">{props.title}</strong> <small className="text-muted">{props.time}</small> </Toast.Header> <Toast.Body>{props.body}</Toast.Body> </Toast> </> render(<Tsty />); function Example() { const [listNtfy, setNtfy] = useState([]); // Function to autohide the ntfys const autoHide = (key) => { // Set visibility of Ntfy to hidden listNtfy.filter((x,i) => i === key)[0].show = false; // Apply the change setNtfy([...listNtfy]); // Check all notifications is hide (if yes, reset the list) if (listNtfy.every(v => v.show === false)) setNtfy([]); }; const style = { position: 'fixed', bottom: '60px', right: '10px', zIndex: '1000'} return ( <> <Button onClick={() => {setNtfy([...listNtfy, { title: 'title #' + listNtfy.length, time: 'now', body: new Date().toString(), show : true }])}}>Add Ntfy</Button> <ToastContainer style={style}> { listNtfy.map( (x,i) => <Tsty show={ x.show } title={x.title} time={x.time} body={ x.body } key={i} idx={i} fcn={ autoHide } /> )} </ToastContainer> </> ); } render(<Example />);