0

I am trying to show the error component (custom made component) in React JS when a error will occur after clicking a button. This component has a timeout of 2000 ms and after that it will fade away. But if I click the button multiple times the error component is coming multiple times and waiting for 2 seconds.

Now what I want is if I know that the error component is already mounted, then using a simple if-else condition I can handle the scenario.

So I want to know how to know if a particular component is mounted in React.

The error component has a default timeout that is 4 second. So when I click the button the Error component is appeared and waiting for 4 seconds to complete. Now in 4 seconds if I click again the button, then previously mounted error component is unmounted but still stays on the top of the screen. A new error component with same data appears on the top of the screen. So, for few ms we have 2 error components are visible in the screen. I want that if one is staying on the top of the screen no other component should be mounted.

Satam Guin
  • 25
  • 5
  • 2
    This might help you. https://stackoverflow.com/questions/39767482/is-there-a-way-to-check-if-the-react-component-is-unmounted – LuVu Nov 01 '19 at 12:26
  • just use this._ismounted member paramter to know the component mount , he is correct – 0xAnon Nov 01 '19 at 12:29

2 Answers2

0

send a callback as prop then call it from componentDidMount() send a flag from the callback write your logic in parent.

Balagoni Harish
  • 106
  • 1
  • 8
0

If the button is clicked, set the displayingError: true in state.

On button click, check if the displayingError is true, if yes, do nothing, else display error.

After your delay, set displayingError back to false.

This way it's only showed once and no additional ones will be created while its up.

Domagoj Vuković
  • 178
  • 1
  • 8
  • The error component has a default timeout that is 2 second. So when I click the button the Error component is appeared and waiting for 2 seconds to complete. Now in 2 seconds if I click again the button, then previously mounted error component is unmounted but still stays on the top of the screen. A new error component with same data appears on the top of the screen. So, for few ms we have 2 error components are visible in the screen. I want that if one is staying on the top of the screen no other component should be mounted. – Satam Guin Nov 02 '19 at 15:51