/Javascript/React/React show view based on role permission

React show view based on role permission

import React from 'react';
import { ShowForPermission } from './ShowForPermission';

cons MyComponent = props => {
   return (
        <div>
            <ShowForPermission permission="DELETE">
                <button>Delete</button>
            </ShowForPermission>
        </div>
   );
}

Source: stackoverflow.com

React show view based on role permission

import PropTypes from 'prop-types';
import { connect } from 'react-redux';

const ShowForPermissionComponent = (props) => {
    const couldShow = props.userPermissions.includes(props.permission);
    return couldShow ? props.children : null;
};

ShowForPermissionComponent.propTypes = {
    permission: PropTypes.string.isRequired,
    userPermissions: PropTypes.array.isRequired
};


const mapStateToProps = state => ({
    userPermissions: state.user.permission //<--- here you will get permissions for your user from Redux store
});

export const ShowForPermission = connect(mapStateToProps)(ShowForPermissionComponent);

Source: stackoverflow.com

Similar codes

0 vote212 views1 answer
Export all functions from js file react
Javascript React
2 votes205 views4 answers
Can't perform a React state update on an unmounted component
Javascript React
1 vote205 views1 answer
Inject Javascript Function not working in Android React Native WebView but work fine in iOS React Native
Javascript React
0 vote233 views1 answer
How to download json object that come from backend in react
Javascript React
1 vote233 views1 answer
React toggle class
Javascript React
0 vote214 views1 answer
Jest create react app only run one test
Javascript React
131 votes353 views6 answers
Creating react app
Javascript React
0 vote226 views1 answer
How to add base url as src in react native
Javascript React
32 votes216 views1 answer
'react-router-dom'
Javascript React
4 votes198 views2 answers
React hooks useref is called in function which is neither a react function component
Javascript React