(eslint) enable 'react/no-children-prop' rule and fix issues (#2029)

.eslintrc.js

@@ -82,7 +82,6 @@ module.exports = {
 
     // TODO: re-enable these rules
     'react-hooks/exhaustive-deps': 'off',
-    'react/no-children-prop': 'off',
     'react/display-name': 'off',
     'react/react-in-jsx-scope': 'off',
     // 'react-hooks/exhaustive-deps': [

packages/desktop-client/src/components/NotesButton.tsx

@@ -124,11 +124,9 @@ function NotesTooltip({
         />
       ) : (
         <Text {...markdownStyles}>
-          <ReactMarkdown
-            remarkPlugins={remarkPlugins}
-            linkTarget="_blank"
-            children={notes}
-          />
+          <ReactMarkdown remarkPlugins={remarkPlugins} linkTarget="_blank">
+            {notes}
+          </ReactMarkdown>
         </Text>
       )}
     </Tooltip>

packages/desktop-client/src/components/ScrollProvider.tsx

@@ -42,10 +42,9 @@ export default function ScrollProvider({ children }: ScrollProviderProps) {
   }, []);
 
   return (
-    <ScrollContext.Provider
-      value={{ scrollY, isBottomReached }}
-      children={children}
-    />
+    <ScrollContext.Provider value={{ scrollY, isBottomReached }}>
+      {children}
+    </ScrollContext.Provider>
   );
 }
 

packages/desktop-client/src/components/Titlebar.tsx

@@ -78,10 +78,9 @@ export function TitlebarProvider({ children }: TitlebarProviderProps) {
   }
 
   return (
-    <TitlebarContext.Provider
-      value={{ sendEvent, subscribe }}
-      children={children}
-    />
+    <TitlebarContext.Provider value={{ sendEvent, subscribe }}>
+      {children}
+    </TitlebarContext.Provider>
   );
 }
 

packages/desktop-client/src/components/budget/report/ReportContext.tsx

@@ -26,8 +26,9 @@ export function ReportProvider({
         onBudgetAction,
         onToggleSummaryCollapse,
       }}
-      children={children}
-    />
+    >
+      {children}
+    </Context.Provider>
   );
 }
 

packages/desktop-client/src/components/budget/rollover/RolloverContext.tsx

@@ -29,8 +29,9 @@ export function RolloverContext({
         onBudgetAction,
         onToggleSummaryCollapse,
       }}
-      children={children}
-    />
+    >
+      {children}
+    </Context.Provider>
   );
 }
 

packages/desktop-client/src/hooks/useSelected.tsx

@@ -340,10 +340,8 @@ export function SelectedProviderWithItems<T extends Item>({
   }, [registerDispatch]);
 
   return (
-    <SelectedProvider<T>
-      instance={selected}
-      fetchAllIds={fetchAllIds}
-      children={children}
-    />
+    <SelectedProvider<T> instance={selected} fetchAllIds={fetchAllIds}>
+      {children}
+    </SelectedProvider>
   );
 }

packages/loot-core/src/client/data-hooks/accounts.tsx

@@ -13,7 +13,9 @@ const AccountsContext = createContext<AccountEntity[]>(null);
 
 export function AccountsProvider({ children }) {
   const data = useAccounts();
-  return <AccountsContext.Provider value={data} children={children} />;
+  return (
+    <AccountsContext.Provider value={data}>{children}</AccountsContext.Provider>
+  );
 }
 
 export function CachedAccounts({ children, idKey }) {

packages/loot-core/src/client/data-hooks/payees.tsx

@@ -13,7 +13,9 @@ const PayeesContext = createContext<PayeeEntity[]>(null);
 
 export function PayeesProvider({ children }) {
   const data = usePayees();
-  return <PayeesContext.Provider value={data} children={children} />;
+  return (
+    <PayeesContext.Provider value={data}>{children}</PayeesContext.Provider>
+  );
 }
 
 export function CachedPayees({ children, idKey }) {

packages/loot-core/src/client/data-hooks/schedules.tsx

@@ -69,7 +69,11 @@ const SchedulesContext = createContext(null);
 
 export function SchedulesProvider({ transform, children }) {
   const data = useSchedules({ transform });
-  return <SchedulesContext.Provider value={data} children={children} />;
+  return (
+    <SchedulesContext.Provider value={data}>
+      {children}
+    </SchedulesContext.Provider>
+  );
 }
 
 export function useCachedSchedules() {

packages/loot-core/src/client/query-hooks.tsx

@@ -46,7 +46,7 @@ function makeContext(queryState, opts, QueryClass) {
       };
     }, []);
 
-    return <Context.Provider value={value} children={children} />;
+    return <Context.Provider value={value}>{children}</Context.Provider>;
   }
 
   function useQuery() {

upcoming-release-notes/2029.md

+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Enable `react/no-children-prop` rule and fix the issues