Tengo este componente de alerta para usar solo para tener un mensaje que dice "Enviado con éxito" y estoy tratando de usar thin en un componente principal. Sin embargo, no se muestra nada en el componente principal.
AlertComponent
import React, { useState } from "react"; import { Snackbar, Alert } from "@mui/material"; const AlertComponent = () => { const [open, setOpen] = useState(false); const handleClick = () => { setOpen(true); }; const handleClose = (event, reason) => { if (reason === "clickaway") { return; } setOpen(false); }; return ( <div> {" "} <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}> <Alert onClose={handleClose} severity="success"> Successfully Submitted! </Alert> </Snackbar> </div> ); }; export default AlertComponent;Componente principal
const ParentComponent = () => { const [open, setOpen] = useState(false); const onSubmit = async (data) => { //codes to submit the data setOpen(true); //trigger the alert component }; return ( <div> //form here to submit <AlertComponent open={open} /> </div> ); }; export default ParentComponent;¿Cómo puedo arreglar esto? Gracias.
Aunque @Ghader Salehi ya comentó la solución, pero si alguien no está seguro de cómo controlar la alerta de los padres, aquí está el código.
AlertComponent.js
import React from "react"; import { Snackbar, Alert } from "@mui/material"; function AlertComponenet(props) { const { open, handleClose } = props; return ( <div> {" "} <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}> <Alert onClose={handleClose} severity="success"> Successfully Submitted! </Alert> </Snackbar> </div> ); } export default AlertComponenet;Componente principal (en mi código-sandbox utilicé App.js)
import React, { useState } from "react"; import "./styles.css"; import AlertComponent from "./AlertComponent"; export default function App() { const [open, setOpen] = useState(false); const handleClick = () => { setOpen(true); }; const handleClose = (event, reason) => { if (reason === "clickaway") { return; } setOpen(false); }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <button onClick={handleClick}>Show Alert</button> <AlertComponent open={open} handleClose={handleClose} /> </div> ); }