TypeError: TestsList is not iterable

Question

I'm trying to use the Tab Component from semantic-ui-react and facing this error. I know that you can only return jsx/react component from such a function but as you can see I need that list that would be required for the Tab component from semantic-ui-react. I will need the context variables anyway to do this.

Someone advised to just return the render: method's jsx through a function and there use the hooks but then menuItem: still needs the context.

TypeError: TestsList is not iterable
./src/components/SideBar/TestsMenu.js/<
C:/Users/Dell/OneDrive/Desktop/niroggyan/nirogyan/src/components/SideBar/TestsMenu.js:72

  69 | 
  70 | 
  71 | 
> 72 | const TestsMenu = [TestsHeader, ...TestsList]
  73 | 
  74 | export default TestsMenu;
  75 | 

TestsMenu.js

import { Header, Button, Message, Tab } from "semantic-ui-react";
import TestDetails from "../FormComponents/TestDetails";
import { TestContext, TabContext } from "../Main";
import { useContext } from "react";
import { useFormContext } from "react-hook-form";
import AddTestButton from "../FormComponents/AddTestButton";
import Search from "./SearchItem";


const TestsHeader = {
    menuItem: {
        header: true,
        content: (
            <>
                <Header as="h3">Tests</Header>{" "}
                <Search />
            </>
        ),
        active: false,
        disabled: true,
    },
    render: () => <Tab.Pane key={"Tests Heading"}></Tab.Pane>,
};

const TestsList = () => {
    const { testList, setTestList } = useContext(TestContext);
    const { setCurrentTabIndex } = useContext(TabContext)
    const { unregister } = useFormContext();

    const handleTestDeletion = (e, testID) => {
        const filterDict = (dict, filterFunc) =>
            Object.fromEntries(Object.entries(dict).filter(filterFunc));

        setTestList((state) => filterDict(state, ([key, val]) => key !== testID));

        unregister(`patient.tests.${testID}`);
        setCurrentTabIndex(0);
    };


    return Object.keys(testList).map((testID) => {
        return {
            menuItem: { content: testList[testID].text, color: "violet" },

            render: () => (
                <Tab.Pane key={testList[testID].text}>
                    <Message
                        attached
                        header="Test Details"
                        content="Fill out the test details."
                    />
                    <TestDetails testID={testID} />
                    <AddTestButton />
                    <Button
                        color="red"
                        type="button"
                        onClick={(event) => handleTestDeletion(event, testID)}
                    >
                        Remove test
                    </Button>
                    <Button color="violet" type="submit">
                        Submit
                    </Button>
                </Tab.Pane>
            ),
        };
    })
}



const TestsMenu = [TestsHeader, ...TestsList]

export default TestsMenu;

-----------------------------------------

Patients.js
//  like TestsMenu.js
----------------------------------------

Main.js

const Main = () => {
  // some code

  const menuItems = [...ProfileMenu, ...TestsMenu];
  return <>
          <Tab
                menu={{ fluid: true, vertical: true, tabular: true }}
                panes={menuItems}
                activeIndex={currentTabIndex}
                onTabChange={(e, { activeIndex }) => {
                  setCurrentTabIndex(activeIndex);
                }}
              />
        
</>
}

EDIT:

The answer removed the error from the gui but didn't do much help because the Array received, TestsMenu is of the form [Object, a function] and thus when I add a new Test, it's not visible in the Sidebar.

CodeSand Box

Answer 1

Had to do it the following way. No other thing was working. Hooks and handleTestDeletion had to be moved to Main.js

import { Header, Button, Message, Tab } from "semantic-ui-react";
import TestDetails from "../FormComponents/TestDetails";
import AddTestButton from "../FormComponents/AddTestButton";
import Search from "./SearchItem";


const getTestHeader = () => {
    return {
        menuItem: {
            header: true,
            content: (
                <>
                    <Header as="h3">Tests</Header>{" "}
                    <Search />
                </>
            ),
            active: false,
            disabled: true,
        },
        render: () => <Tab.Pane key={"Tests Heading"}></Tab.Pane>,
    }
};

const getTestList = (testList, handleTestDeletion) => {

    return Object.keys(testList).map((testID) => {
        return {
            menuItem: { content: testList[testID].text, color: "violet" },

            render: () => (
                <Tab.Pane key={testList[testID].text}>
                    <Message
                        attached
                        header="Test Details"
                        content="Fill out the test details."
                    />
                    <TestDetails testID={testID} />
                    <AddTestButton />
                    <Button
                        color="red"
                        type="button"
                        onClick={(event) => handleTestDeletion(event, testID)}
                    >
                        Remove test
                    </Button>
                    <Button color="violet" type="submit">
                        Submit
                    </Button>
                </Tab.Pane>
            ),
        };
    })
}


const getTestMenu = (testList, handleTestDeletion) => {
    return [getTestHeader(), ...getTestList(testList, handleTestDeletion)]
}

export default getTestMenu;