Mock interview for SDE 1 in Product based company | react js | EP - 17 

Thanks chirag for having me. It was a great learning experience😊

Thank you for the video 👍. That parent container for top values is very nice trick 👍. Complete Solution by me: function Toast({ id, text, onClose, timer = 10 }) { const [count, setCount] = useState(timer); const timerRef = useRef(null); const parentRef = useRef(document.querySelector(".toast-container")); if (!parentRef.current) { const el = document.createElement("div"); el.classList.add("toast-container"); document.body.appendChild(el); parentRef.current = el; } useEffect(() => { timerRef.current = setInterval(() => { setCount((prev) => prev - 1); }, 1000); return () => { clearInterval(timerRef.current); }; }, []); useEffect(() => { if (count { onClose(id); clearInterval(timerRef.current); }; return createPortal( {id} {"=>"} {text}-{count} x , parentRef.current ); } function App() { const [toasts, setToasts] = useState([]); const closeToast = (id) => { setToasts((prev) => prev.filter((t) => t.id !== id)); }; const addToast = () => { setToasts((prev) => [ ...prev, { id: prev.length + 1, text: "I am toast", onClose: closeToast, timer: 20, }, ]); }; const handleClick = () => { addToast(); }; return ( Show Toast {toasts.map((toast) => { return ; })} ); }

Yes it's really good video, keep bringing more videos like this

Really nice video Chirag, Loving the content more day by day 😍

Hi Chirag. It would be great if you could upload the full question with all the subtasks. Would be easier for us to practice and follow along. And thanks a lot for these videos. Super helpful.

Just stopped in between to give another comment. Loving it Chirag. Please bring more such interview questions

Thank you for this interview

Thanks Chirag Sir. It is much needed

Can we do it with lib react -toastify?

very informative sir

Very informative Chirag!

interesting Chirag

Hii sir, very informative video, but thumbnail of video , can be little improved

what was the issue in that why all toast are disappearing ?anyone knows?

import { useEffect, useRef, useState } from "react"; import "./App.css"; const Toast = ({ id, text, removeToastHandler, time }) => { const [timer, setTimer] = useState(time); const interval = useRef(null) useEffect(() => { if (!interval.current) { interval.current = setInterval(() => { setTimer((prev) => { if (prev == 1) { clearInterval(interval.current); removeToastHandler(id); } else { return prev - 1; } }); }, 1000); } return () => clearInterval(interval); }, [interval]); const closeToastHandler = (id) => { clearInterval(interval.current); removeToastHandler(id); } return ( {text} closeToastHandler(id)}>X Disappears in {timer} secs ); }; const ToastContainer = ({ toasts, setToasts }) => { const removeToastHandler = (id) => { setToasts((prev) => { const filteredToasts = prev.filter((toast) => toast.id != id); return filteredToasts; }); }; return ( {toasts.map((toast) => { return ( ); })} ); }; export default function App() { const [toasts, setToasts] = useState([]); const addToast = () => { const id = `${Date.now()}`; const toastObj = { id, text: `Added new toast with ID: ${id}`, time: 10, // in secs }; setToasts((prev) => [...prev, toastObj]); }; return ( addToast()}>Show Toast ); } It does handle that "Disappearing of all toasts" problem but definitely many improvements yet to be done.

2 minut ka kam 1 Ghanta Laga Diya😂 vah Bhi Kiya Nahin

Wow chirag great way to ask to subscribe.