skip to Main Content

I’m trying to create a "permissions of a role" screen.
Here is the sample code :

import React, { useEffect, useState } from "react";
import { Form, Checkbox, Collapse, Row } from "antd";

function RolePermissions() {
    const [permissions, setUsersPermissions] = useState([]);

    const onChange = (e) => {
        if (e.target.checked) {
            if (!permissions.includes(e.target.value)) setUsersPermissions(permissions.push(e.target.value));
        } else {
            var tempArray = permissions.filter((item) => item !== e.target.value);
            setUsersPermissions(tempArray);
        }
    };

    //prettier-ignore
    const items = [
        {
            key: "1000",
            label: "Person",
            children: (
                <>
                    <Row style={{ paddingBottom: 5 }}><Checkbox value="1000" checked={permissions.includes("1000")} onChange={onChange}>Read</Checkbox></Row>
                    <Row style={{ paddingBottom: 5 }}><Checkbox value="1001" checked={permissions.includes("1001")} onChange={onChange}>Write</Checkbox></Row>
                    <Row style={{ paddingBottom: 5 }}><Checkbox value="1002" checked={permissions.includes("1002")} onChange={onChange}>Delete</Checkbox></Row>
                </>
            ),
        },
        {
            key: "1100",
            label: "Company",
            children: (
                <>
                    <Row style={{ paddingBottom: 5 }}><Checkbox value="1100" checked={permissions.includes("1100")} onChange={onChange}>Read</Checkbox></Row>
                    <Row style={{ paddingBottom: 5 }}><Checkbox value="1101" checked={permissions.includes("1101")} onChange={onChange}>Write</Checkbox></Row>
                    <Row style={{ paddingBottom: 5 }}><Checkbox value="1102" checked={permissions.includes("1102")} onChange={onChange}>Delete</Checkbox></Row>
                </>
            ),
        },
    ];

    useEffect(() => {
        setUsersPermissions(["1000", "1001", "1100"]);
    }, []);

    return (
        <Form>
            <Collapse items={items} defaultActiveKey={["1000", "1100"]}></Collapse>
        </Form>
    );
}

export default RolePermissions;

sample

It works for unchecking but fails when check it again.
Error is : permissions.includes is not a function

source of error: <Checkbox value="1000" checked={permissions.includes("1000")} onChange={onChange}>Read

I think the type of "permissions" is changing because of the setUsersPermissions(tempArray); line.

How can I fix the error.

ps: I’m new to react.js and not sure if this is the right way to do that.
I would appreciate it if you could recommend resources about roles and permissions.

2

Answers


  1. in short the issue occurs because of directly modifying the state. I’ve created a codesandbox project with your code and should work now:

    https://codesandbox.io/p/sandbox/array-includes-8gs4zw

    The main change I’ve made is to create a newPermissions array for all the array operations and then update the state with this modified object

    Login or Signup to reply.
  2. Hope this code will fix your problem

    import React, { useEffect, useState } from "react";
    import { Form, Checkbox, Collapse, Row } from "antd";
    
    function RolePermissions() {
      const [permissions, setUsersPermissions] = useState([]);
    
      const onChange = (e) => {
        if (e.target.checked) {
          if (!permissions.includes(e.target.value))
            setUsersPermissions((prev) => {
              return [...prev, e.target.value];
            });
        } else {
          setUsersPermissions((prev) =>
            prev.filter((item) => item !== e.target.value)
          );
        }
      };
    
      //prettier-ignore
      const items = [
            {
                key: "1000",
                label: "Person",
                children: (
                    <>
                        <Row style={{ paddingBottom: 5 }}><Checkbox value="1000" checked={permissions.includes("1000")} onChange={onChange}>Read</Checkbox></Row>
                        <Row style={{ paddingBottom: 5 }}><Checkbox value="1001" checked={permissions.includes("1001")} onChange={onChange}>Write</Checkbox></Row>
                        <Row style={{ paddingBottom: 5 }}><Checkbox value="1002" checked={permissions.includes("1002")} onChange={onChange}>Delete</Checkbox></Row>
                    </>
                ),
            },
            {
                key: "1100",
                label: "Company",
                children: (
                    <>
                        <Row style={{ paddingBottom: 5 }}><Checkbox value="1100" checked={permissions.includes("1100")} onChange={onChange}>Read</Checkbox></Row>
                        <Row style={{ paddingBottom: 5 }}><Checkbox value="1101" checked={permissions.includes("1101")} onChange={onChange}>Write</Checkbox></Row>
                        <Row style={{ paddingBottom: 5 }}><Checkbox value="1102" checked={permissions.includes("1102")} onChange={onChange}>Delete</Checkbox></Row>
                    </>
                ),
            },
        ];
    
      useEffect(() => {
        setUsersPermissions(["1000", "1001", "1100"]);
      }, []);
    
      return (
        <Form>
          <Collapse items={items} defaultActiveKey={["1000", "1100"]}></Collapse>
        </Form>
      );
    }
    
    export default RolePermissions;
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search