/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

1 vote138 views1 answer
React current path
Javascript React
0 vote162 views1 answer
Debug.xcconfig: unable to open file react native
Javascript React
0 vote135 views1 answer
Unable to resolve module `@react-native-community/toolbar-android
Javascript React
0 vote139 views1 answer
Invariant Violation: [React Intl] An `id` must be provided to format a message.
Javascript React
0 vote146 views1 answer
React this.state.selectedDays.toLocaleDateString is not a function
Javascript React
33 votes145 views2 answers
Routing in react
Javascript React
15 votes119 views2 answers
UseReducer() hook react
Javascript React
1 vote101 views1 answer
How to pass props in react test cases
Javascript React
0 vote131 views1 answer
Ant design not working in react js
Javascript React
0 vote167 views1 answer
Attempted import error: 'useDispatch' is not exported from 'react-redux'
Javascript React