-1

Display notification in catch block of Axios.

problem encountered is Error Message not hiding after specified time using setTimeout.

Honey Singh
  • 362
  • 8
  • What is `NotificationMeta`? – Nick Parsons Jan 26 '23 at 11:10
  • @NickParsons Yes I have updated my code for ```NotificationMeta``` – Honey Singh Jan 26 '23 at 11:12
  • So `NotificationMeta` is just an object in your code? Changing it won't cause `Notification` to update/rerender (objects aren't special in React, changing a property in an object won't do anything if that object's value isn't being read again, which will only occur when a rerender occurs). It needs to be state if you want that to occur. – Nick Parsons Jan 26 '23 at 11:13
  • Okay I understood what you meant. I am trying to add state to ```Notifications``` passing meta to ```useState(NotificationMeta.display)```. – Honey Singh Jan 26 '23 at 11:21
  • @NickParsons I did updated the state in ```Notifications```. However I still fail to hide the notification after 3 secs. – Honey Singh Jan 26 '23 at 11:25
  • The thing that will cause a rerender is calling your `setDisplay` function. While you have a use-effect setup to trigger when `NotificationMeta.display` changes, that use-effect will only check if `NotificationMeta.display` has changed when `Notification` has rerendered, so if it's never rerendering, `NotificationMeta.display` will never be checked for changes. Remove the `useEffect`, and instead pass `setDisplay` as a prop down to `Component B` to that you can call `setDisplay()`. – Nick Parsons Jan 26 '23 at 11:30
  • @NickParsons Great. It worked. I just created the useState signature and exported ```setNotification``` as a meta param. . It worked like charm. Thank you. – Honey Singh Jan 26 '23 at 11:47
  • While that may work, you shouldn't be passing things to other components like that, you'll especially find issues if you have multiple `Notification` components. You should be passing it as a prop down to Component B or using `useContext()` to set the value. If `Notification` doesn't have visibility of Comonent B, then you should lift the `display` state up to a something that has visibility of both Component B and `Notificaiton`. See [Sharing state between componentst](https://beta.reactjs.org/learn/sharing-state-between-components) – Nick Parsons Jan 26 '23 at 11:54
  • @NickParsons Notification is in different project. Its a library project. . So I need to npm install the library and import the Meta in Component A and B. Therefore the above approach. – Honey Singh Jan 26 '23 at 12:04

1 Answers1

0

There are two possible solutions. Because alert cannot work like this you coded.

  1. Using React toastify
  2. Making your custom alert

References:

  1. Making own toaster like this: https://www.w3schools.com/howto/howto_js_snackbar.asp
  2. Making alert like this: How can I auto hide alert box after it showing it?
tahsin_siad
  • 86
  • 1
  • 11
  • Toastify was my first suggestion but lastly we need to bow down and listen to someone who does not even know the ```C``` of ```Coding```. – Honey Singh Jan 26 '23 at 11:29