Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – includes is not a function

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.

Tags:

2

Answers


  1. 0

    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. 0

    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