Permission handle

Access.js

import React from "react";

const isPremited = (roles, type) => {
  // premission check logic
  return ...;
}


export default () => {
  let { roles, permissionId, children } = this.props;
        
  if(!isPremited(roles, permissionId)) return </div>;

  return (
    <React.Fragment>{children}</React.Fragment>    
  );  
}

TodoList.js

import React from "react";
import Access from "./Access";

export default class TodoList extends React.Component {
  render() {
    return (
      <div>
        <Access roles={this.props.roles} permissionId="VIEW_TODO" >
          <ToDos />
        </Access>
        <Access roles={this.props.roles} permissionId="ADD_TODO" >
          <AddTodo />
        </Access>
      </div>
    );
  }
}