title: show action button based on role reactjs
body: <p>I am working on a role-based application. We have 4 different services and we have to show the action button based on role. For example, admin can see all the action button but people from the finance team should only see the finance action button.</p>
  
  <p>I am using CASL js library but it is hard to understand how it is working. Now my all the action button being shown.</p>
  
  <p><strong>ability.js</strong></p>
  
  <pre><code>import { AbilityBuilder } from "@casl/ability";
  
  const user = { name: "Admin", role: "finance" };
  // const user = { name: "Finance", role: "finance" };
  // const user = { name: "Subscriber", role: "sale" };
  // const user = { name: "Subscriber", role: "employee" };
  
  function subjectName(item) {
    if (user.role === "admin") {
      return "Admin";
    }
    return item;
  }
  
  export default AbilityBuilder.define({ subjectName }, can =&gt; {
    can(["read"], "Admin");
    can(["read"], "Finance");
    can(["read"], "Sale");
    can(["read"], "Employee");
    can(["read"], "Stock");
  });
  </code></pre>
  
  <p><strong>react app.js</strong></p>
  
  <pre><code>import React from "react";
  import { Can } from "@casl/react";
  import ability from "./ability";
  
  import "./App.css";
  
  export default () =&gt; {
    return (
      &lt;div&gt;
        &lt;h1&gt;User&lt;/h1&gt;
        &lt;Can I="read" a="Finance" ability={ability}&gt;
          &lt;button&gt;Finance&lt;/button&gt;
        &lt;/Can&gt;
        &lt;Can I="read" a="Sale" ability={ability}&gt;
          &lt;button&gt;Sale&lt;/button&gt;
        &lt;/Can&gt;
        &lt;Can I="read" a="Employee" ability={ability}&gt;
          &lt;button&gt;employee&lt;/button&gt;
        &lt;/Can&gt;
        &lt;Can I="read" a="Stock" ability={ability}&gt;
          &lt;button&gt;stock&lt;/button&gt;
        &lt;/Can&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>