Kevin Powell - Community•2mo ago

how to re render react re usabelcomponent

So I have an resusable component for Toaster notification with message , color property for now I only make with message So In that Toaster , it contains message and close icon button so whenever I click the toaster would go off (false) but whenever I get message propes I set useEffect with setShow true So the problem is if I get same message again It doesn't show the toaster Toaster.jsx

Function Toaster({message}){
const [show,setIsshow] = useState(true);

Function close(){
setIsshow(false);
} 

useEffect(()=>{
setIsshow (true) },[message] )

If(!show) { 
return null 
}
return ( 
<div>
<p> {message} </p>
<button onClick={close} > Click </button>
</div>
 )
}

Function Toaster({message}){
const [show,setIsshow] = useState(true);

Function close(){
setIsshow(false);
} 

useEffect(()=>{
setIsshow (true) },[message] )

If(!show) { 
return null 
}
return ( 
<div>
<p> {message} </p>
<button onClick={close} > Click </button>
</div>
 )
}

Home.jsx

const isErr, setError=(false)
Const errmsg,seterrms=useState ('')
try{ 

} Catch(e){ 
setError(true)
}

return 
( 
{ 
isErr && <Toaster message={errmsg} />

const isErr, setError=(false)
Const errmsg,seterrms=useState ('')
try{ 

} Catch(e){ 
setError(true)
}

return 
( 
{ 
isErr && <Toaster message={errmsg} />

1 Reply

vicOP•2mo ago

So if I get same message for 2nd time continuously , the useEffect on toaster doesn't run due to dependency , Can I get any ideas or solutions?? Cuz I need to use this as resusable

Gaming

Programming

how to re render react re usabelcomponent