How to unmount unrender or remove a component from itself in a React Redux Typescript notification message

Question

I know this question has been asked a couple of times already but most of the time  the solution is to handle this in the parent  as the flow of responsibility is only descending  However  sometimes  you need to kill a component from one of its methods  I know I can t modify its props  and If I start adding booleans as the state  it s gonna start to be really messy for a simple component  Here is what I m trying to achieve   A small error box component  with an  quot x quot  to dismiss it  Receiving an error through its props will display it but I d like a way to close it from its own code  class ErrorBoxComponent extends React Component      dismiss            What should I put here           render         if   this props error          return null             return          lt div data-alert className  quot alert-box error-box quot  gt           this props error           lt a href  quot   quot  className  quot close quot  onClick  this dismiss bind this   gt  amp times  lt  a gt         lt  div gt                 export default ErrorBoxComponent   And I would use it like this in the parent component    lt ErrorBox error  this state error   gt   In the section  What should I put here    I already tried   ReactDOM unmountComponentAtNode ReactDOM findDOMNode this  parentNode   Which throws a nice error in the console    Warning  unmountComponentAtNode    The node you re attempting to unmount was rendered by React and is not a top-level container  Instead  have the parent component update its state and rerender in order to remove this component   Should I copy the incoming props in the ErrorBox state  and manipulate it only internally

User · Answer

I ve been to this post about 10 times now and I just wanted to leave my two cents here  You can just unmount it conditionally   if  renderMyComponent       lt MyComponent props         gt      All you have to do is remove it from the DOM in order to unmount it   As long as renderMyComponent   true  the component will render  If you set renderMyComponent   false  it will unmount from the DOM

User · Answer

This isn t appropriate in all situations but you can conditionally return false inside the component itself if a certain criteria is or isn t met   It doesn t unmount the component  but it removes all rendered content  This would only be bad  in my mind  if you have event listeners in the component that should be removed when the component is no longer needed   import React    Component   from  react    export default class MyComponent extends Component       constructor props            super props            this state                 hideComponent  false                      closeThis        gt            this setState prevState   gt                 hideComponent   prevState hideComponent                         render             if  this state hideComponent     true   return false            return                lt div className   content   onClick       gt  this closeThis  gt                  YOUR CODE HERE              lt  div gt

User · Answer

In most cases  it is enough just to hide the element  for example in this way   export default class ErrorBoxComponent extends React Component       constructor props            super props            this state                 isHidden  false                      dismiss             this setState               isHidden  true                       render             if   this props error                return null                     return                lt div data-alert className    alert-box error-box      this state isHidden    DISPLAY-NONE-CLASS          gt                    this props error                    lt a href     className  close  onClick   this dismiss bind this    gt  amp times  lt  a gt               lt  div gt                       Or you may render rerender not render via parent component like this  export default class ParentComponent extends React Component       constructor props            super props            this state                 isErrorShown  true                      dismiss             this setState               isErrorShown  false                       showError             if  this state isErrorShown                return  lt ErrorBox                  error   this state error                   dismiss   this dismiss bind this                  gt                     return null             render              return                lt div gt                    this showError                  lt  div gt                      export default class ErrorBoxComponent extends React Component       dismiss             this props dismiss               render             if   this props error                return null                     return                lt div data-alert className  alert-box error-box  gt                    this props error                    lt a href     className  close  onClick   this dismiss bind this    gt  amp times  lt  a gt               lt  div gt                       Finally  there is a way to remove html node  but i really dont know is it a good idea  Maybe someone who knows React from internal will say something about this   export default class ErrorBoxComponent extends React Component       dismiss             this el remove               render             if   this props error                return null                     return                lt div data-alert className  alert-box error-box  ref    el    gt    this el   el    gt                    this props error                    lt a href     className  close  onClick   this dismiss bind this    gt  amp times  lt  a gt               lt  div gt

User · Answer

Just like that nice warning you got  you are trying to do something that is an Anti-Pattern in React  This is a no-no  React is intended to have an unmount happen from a parent to child relationship  Now if you want a child to unmount itself  you can simulate this with a state change in the parent that is triggered by the child  let me show you in code  class Child extends React Component       constructor         dismiss             this props unmountMe               render               code          class Parent         constructor            super props          this state    renderChild  true           this handleChildUnmount   this handleChildUnmount bind this             handleChildUnmount            this setState  renderChild  false              render               code          this state renderChild    lt Child unmountMe  this handleChildUnmount    gt    null            this is a very simple example  but you can see a rough way to pass through to the parent an action That being said you should probably be going through the store  dispatch action  to allow your store to contain the correct data when it goes to render I ve done error status messages for two separate applications  both went through the store  It s the preferred method    If you d like I can post some code as to how to do that  EDIT  Here is how I set up a notification system using React Redux Typescript Few things to note first  this is in typescript so you would need to remove the type declarations    I am using the npm packages lodash for operations  and classnames  cx alias  for inline classname assignment  The beauty of this setup is I use a unique identifier for each notification when the action creates it   e g  notify id   This unique ID is a Symbol    This way if you want to remove any notification at any point in time you can because you know which one to remove  This notification system will let you stack as many as you want and they will go away when the animation is completed  I am hooking into the animation event and when it finishes I trigger some code to remove the notification  I also set up a fallback timeout to remove the notification just in case the animation callback doesn t fire  notification-actions ts import   USER SYSTEM NOTIFICATION   from     constants action-types    interface IDispatchType       type  string      payload   any      remove   Symbol     export const notifySuccess    message  any  duration   number    gt        return  dispatch  Function    gt            dispatch   type  USER SYSTEM NOTIFICATION  payload    isSuccess  true  message  notify id  Symbol    duration     as IDispatchType              export const notifyFailure    message  any  duration   number    gt        return  dispatch  Function    gt            dispatch   type  USER SYSTEM NOTIFICATION  payload    isSuccess  false  message  notify id  Symbol    duration     as IDispatchType              export const clearNotification    notifyId  Symbol    gt        return  dispatch  Function    gt            dispatch   type  USER SYSTEM NOTIFICATION  remove  notifyId   as IDispatchType              notification-reducer ts const defaultState         userNotifications         export default  state  ISystemNotificationReducer   defaultState  action  IDispatchType    gt        switch  action type            case USER SYSTEM NOTIFICATION              const list  ISystemNotification       clone state userNotifications                     if    has action   remove                      const key   parseInt   findKey list   n  ISystemNotification    gt  n notify id     action remove                    if  key                           mutate list and remove the specified item                     list splice key  1                                   else                   list push action payload                             return   assign     state    userNotifications  list               return state      app tsx in the base render for your application you would render the notifications render         const   systemNotifications     this props      return            lt div gt               lt AppHeader   gt               lt div className  quot user-notify-wrap quot  gt                      get systemNotifications   userNotifications    amp  amp  Boolean   get systemNotifications   userNotifications length                            reverse   map   get systemNotifications   userNotifications         n  i    gt   lt UserNotification key  i  data  n  clearNotification  this props actions clearNotification    gt                          null                                lt  div gt               lt div className  quot content quot  gt                   this props children               lt  div gt           lt  div gt            user-notification tsx user notification class        Simple notification class       Usage           lt SomeComponent notifySuccess  this props notifySuccess  notifyFailure  this props notifyFailure    gt          these two functions are actions and should be props when the component is connect  ed      call it with either a string or components  optional param of how long to display it  defaults to 5 seconds          this props notifySuccess  it Works      2           this props notifySuccess  lt SomeComponentHere   gt   15           this props notifyFailure  lt div gt You dun goofed lt  div gt         interface IUserNotifyProps       data  any      clearNotification notifyID  symbol   any     export default class UserNotify extends React Component lt IUserNotifyProps     gt        public notifyRef   null      private timeout   null       componentDidMount             const duration  number     get this props   data duration                        this notifyRef style animationDuration   duration      duration s     5s                        fallback incase the animation event doesn t fire         const timeoutDuration    duration   1000    500          this timeout   setTimeout      gt                this notifyRef classList add  hidden                this props clearNotification   get this props   data notify id   as symbol              timeoutDuration            TransitionEvents addEndEventListener              this notifyRef              this onAmimationComplete                      componentWillUnmount             clearTimeout this timeout            TransitionEvents removeEndEventListener              this notifyRef              this onAmimationComplete                      onAmimationComplete    e    gt            if    get e   animationName        fadeInAndOut                 this props clearNotification   get this props   data notify id   as symbol                       handleCloseClick    e    gt            e preventDefault            this props clearNotification   get this props   data notify id   as symbol             assignNotifyRef   target   gt  this notifyRef   target      render             const  data  clearNotification    this props          return                lt div ref  this assignNotifyRef  className  cx  user-notification fade-in-out    success  data isSuccess  failure   data isSuccess    gt                      isString data message    data message    lt h3 gt  data message  lt  h3 gt                    lt div className  quot close-message quot  onClick  this handleCloseClick  gt   lt  div gt               lt  div gt

User · Answer

instead of using  ReactDOM unmountComponentAtNode ReactDOM findDOMNode this  parentNode    try using   ReactDOM unmountComponentAtNode document getElementById  root

[reactjs] How to unmount, unrender or remove a component, from itself in a React/Redux/Typescript notification message

Examples related to reactjs

Examples related to unmount