/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 vote332 views1 answer
Image preload React
Javascript React
0 vote335 views1 answer
Const userMessage Reaction = new UserMessage Reaction({ _id: mongoose.Types.ObjectId(), userId: "USERID", userName: "TESTUSERNAME", messageId: "TESTMESSAGEID", time: "TESTTIME" });
Javascript React
0 vote350 views2 answers
Call a method of component from outside react
Javascript React
73 votes323 views7 answers
React icons
Javascript React
0 vote337 views1 answer
Timeline material ui react native
Javascript React
0 vote339 views1 answer
Popup react now ui
Javascript React
3 votes323 views3 answers
Async await class component react
Javascript React
0 vote336 views1 answer
How to link t settings react native ios
Javascript React
1 vote362 views1 answer
Import library react js
Javascript React
0 vote338 views1 answer
Remove stack header bottom line react native
Javascript React