title: show components based on user role in react
body: <p>I want to show a component and it's icon based on user role and I'm using react/redux but I don't know how to do this. I have to get the decoded user token for this.
  the component privateRoute:</p>
  <pre><code>&lt;PrivateRoute path=&quot;/settings&quot; component={waitFor(Settings)} /&gt;
  </code></pre>
  <p>and my action :</p>
  <pre><code>export const getUser = () =&gt; {
  if (localStorage.getItem('token')) {
      return jwt_decode(localStorage.getItem('token'))
  }}
  export const getUserInfo = (userData)=&gt;dispatch=&gt;{
  const userData =  jwt_decode(localStorage.getItem('token'))
  dispatch({
          type: userConstants.GET_USER_DATA,
          payload : userData
      
      })}
  </code></pre>
  <p>and it is my reducer:</p>
  <pre><code>const initState = {
   userData: {
  
     },
   };
   const userReducers = (state = initState, action) =&gt; {
     switch (action.type) {
       case userConstants:
    return null;
  
  case userConstants.GET_USER_DATA:
      return {
        ...state, 
        userData: action.payload
      }
  
  default:
    return state
    }}
  </code></pre>
  <p>I want to have the icon in this sidebar component :</p>
  <pre><code>class Sidebar extends Component {
     constructor(props) {
      super(props)
      this.state = {
          userRoles: [],
          listItems: [
              
              {
                  listText: 'setting',
                  listIcon: SettingIcon,
                  expan: true,
                  isExpanded: false,
                  route: '',
                  key: &quot;Setting&quot;,
                 
                   ///otheritems...
  
          ],
      }
  }
  
  componentDidMount() {
      let userData = this.props.getUser();
      if (userData &amp;&amp; userData.role) {
          this.setState({ userRoles: userData.role })
      }
  
      
  }
     }
  
      render(){
          return(
                   &lt;div&gt;{{this.state.listItems.map((item, index) =&gt; {
                                  let flag = true;
                                  if (item.key === 'Setting' &amp;&amp; this.state.userRoles.length &amp;&amp;
                                      !this.state.userRoles
                                          .map((rol) =&gt; rol)
                                          .includes(&quot;Admin&quot;)
  
                                  ) {
                                      flag = false;}if(flag){
                                       &lt;img src={item.listIcon} /&gt;
                         }}
                 &lt;/div&gt;)}
  
  
  
  const mapStateToProps = state =&gt; {
      return {
       openSideBar: state.openSideBar , 
       userInfo : state.userInfo
      };};
  
  const mapDispatchToProps = (dispatch) =&gt; ({
  logout: () =&gt; dispatch(logout()),
  getUser: () =&gt; getUser(),
  getUserInfo : () =&gt; dispatch(getUserInfo())
  
    });
  </code></pre>
  <p>I've written the code again so please don't mind the syntax</p>