redux toolkit useSelector() inside loop

Question

so i have 2 redux state and selectors that is working well. but i want to call the second selector (get the detail list based on category.id) inside map() loop. how can i do that?

const Dashboard = () => {
  const [data, setData] = useState([]);
  const categories = useSelector(viewFinalCategories);
  // categories is loaded well
  
  const createFinalData = () => {
    const finalData = categories.map((category) => {
      return {
        title: category.label,
        category: category,
        data: useSelector(viewInventoriesByCategory(category.id)), // <- error hook cannot called here..
      };
    });
    setData(finalData);
  };

  useEffect(() => {
    createFinalData();
  }, [categories]);

  return (
     // SectionList of RN here...
  )

Answer 1

Since it violates the hook rule, you can't call useSelector inside a function.

the solution is to get the data in the component level and do the filtering inside the function

const {inventories} = useSelector(state => state)

 const createFinalData = () => {
    const finalData = categories.map((category) => {
      return {
        title: category.label,
        category: category,
        data: inventories.filter((item) => item.idCategory === idCategory)
      };
    });
    setData(finalData);
  };