title: How to handle permission check in React app (State maintain in Redux)?
body: <p>How to handle permission check in React?
  I tried in two ways. Any better way to handle permission check or which one is most good to use?</p>
  
  <p><strong>Type 1</strong><br>
      Pass permissions via context. Permission component gets permissions from context if permission satisfy return component or null</p>
  
  <pre><code>class HomePage extends React.Component{
    getChildContext(){
     return {permission:this.props.permission}
    }
     render(){
       return &lt;div&gt;
         &lt;Permission check='Edit'&gt;
           &lt;PopupMenu&gt; 
             &lt;div&gt;Edit&lt;/div&gt;
           &lt;/PopupMenu&gt;
         &lt;/Permission&gt;
         &lt;Permission check='Delete'&gt;
           &lt;PopupMenu&gt; 
              &lt;div&gt;Delete&lt;/div&gt;
           &lt;/PopupMenu&gt;
         &lt;/Permission&gt;
     &lt;/div&gt;
    }
  }
  HomePage.childContextType={permission:...}
  class Permission extends React.Component{
      render(){
         if(this.context.permissions.indexOf(this.props.check)!=-1)
           return this.props.children
         else
           return null;
      }
  }
  </code></pre>
  
  <p><strong>Type 2</strong><br>
      Check the permission in the mapStateToProps function and return props based on permission</p>
  
  <pre><code>class HomePage extends React.Component{
      render(){
      return &lt;div&gt;
         &lt;PopupMenu&gt; 
            &lt;div&gt;{this.props.operation}&lt;/div&gt;
         &lt;/PopupMenu&gt;
      &lt;/div&gt;
      }
    }
  function mapStateToProps(state){
     var operation="";
     if(state.permission=="Edit"){
        operation="Edit"
     }
     else if(state.permission=="Delete"){
        operation="Delete"
     }
     return {operation}
  }
  connect(mapStateToProps)(HomePage)
  </code></pre>