How to fix icon error eslint ?

rodrigodiasf1984 commented 10 months ago

Hi guys, can you help me?

interface DropdownItem { label: string; value: ParkingType; icon: () => JSX.Element; }

package json:

"dependencies": { "@aws-amplify/api": "^5.4.4", "@gorhom/bottom-sheet": "^4.4.5", "@hookform/resolvers": "^2.9.10", "@notifee/react-native": "^7.8.0", "@react-native-async-storage/async-storage": "^1.17.11", "@react-native-community/datetimepicker": "^6.7.5", "@react-native-community/netinfo": "^9.3.7", "@react-native-firebase/app": "^14.11.0", "@react-native-firebase/messaging": "^14.11.0", "@react-native-masked-view/masked-view": "0.2.8", "@react-navigation/native": "^6.0.13", "@react-navigation/native-stack": "^6.9.1", "@react-navigation/stack": "^6.3.4", "@shopify/flash-list": "^1.4.2", "aws-amplify": "^5.0.14", "clsx": "^1.2.1", "date-fns": "^2.29.3", "lottie-react-native": "^5.1.6", "nativewind": "^2.0.11", "phosphor-react-native": "^1.1.2", "react": "18.1.0", "react-hook-form": "^7.39.4", "react-native": "0.70.6", "react-native-actions-sheet": "^0.8.29", "react-native-background-fetch": "4.1.5", "react-native-background-geolocation": "4.10.1", "react-native-biometrics": "^3.0.1", "react-native-confirmation-code-field": "^7.3.1", "react-native-contacts": "^7.0.5", "react-native-device-info": "^10.4.0", "react-native-dotenv": "^3.4.9", "react-native-dropdown-picker": "^5.4.6", "react-native-flash-message": "^0.4.0", "react-native-floating-label-input": "^1.4.2", "react-native-gesture-handler": "~2.8.0", "react-native-google-places-autocomplete": "^2.5.1", "react-native-image-crop-picker": "^0.37.3", "react-native-iphone-x-helper": "^1.3.1", "react-native-maps": "^1.3.2", "react-native-modal-datetime-picker": "^14.0.1", "react-native-open-maps": "^0.4.0", "react-native-permissions": "^3.6.1", "react-native-phone-number-input": "^2.1.0", "react-native-ratings": "^8.1.0", "react-native-reanimated": "^2.14.4", "react-native-responsive-screen": "^1.4.2", "react-native-safe-area-context": "4.4.1", "react-native-screens": "~3.18.0", "react-native-splash-screen": "^3.3.0", "react-native-svg": "^13.9.0", "react-native-svg-transformer": "^1.0.0", "react-native-swipe-gestures": "^1.0.5", "react-native-swipe-list-view": "^3.2.9", "react-native-tooltip-2": "^0.1.3", "react-native-version-check": "^3.4.7", "react-native-webview": "^13.2.3", "redux-persist": "^6.0.0", "rn-swipe-button": "^1.3.8", "tailwindcss": "3.3.2", "yup": "^0.32.11", "zustand": "^4.3.6" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@testing-library/jest-native": "^5.4.1", "@testing-library/react-native": "^11.5.1", "@tsconfig/react-native": "^2.0.2", "@types/jest": "^29.4.0", "@types/react": "^17.0.43", "@types/react-native": "^0.70.11", "@types/react-native-dotenv": "^0.2.0", "@types/react-native-version-check": "^3.4.5", "@types/react-test-renderer": "^18.0.0", "@typescript-eslint/eslint-plugin": "^6.4.0", "babel-plugin-module-resolver": "^5.0.0", "eslint": "^8.0.1", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.1.0", "eslint-config-prettier": "^9.0.0", "eslint-config-standard-with-typescript": "^39.0.0", "eslint-import-resolver-babel-module": "^5.3.2", "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-n": "^15.0.0 || ^16.0.0 ", "eslint-plugin-prettier": "^5.0.0", "eslint-plugin-promise": "^6.0.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-native": "^4.0.0", "jest": "^29.6.4", "jest-transform-stub": "^2.0.0", "metro-react-native-babel-preset": "0.72.3", "prettier": "^3.0.3", "react-native-clean-project": "^4.0.1", "react-test-renderer": "^18.2.0", "typescript": "*" }, "resolutions": { "@types/react": "17.0.43", "@types/react-native": "~0.70.6" } }

taeh98 commented 10 months ago

Hi @rodrigodiasf1984, I hope you're doing well.

From what I can see, this looks like an error in and from your project code, not this library, so your question probably isn't relevant as an issue here and would probably be better asked at https://github.com/eslint/eslint. Did you try googling the ESLint rule and reading its docs and searching Stack Overflow for others who have had the same issue?

However, I think you're probably defining the DropdownIcon with the GarageIcon inside of a render function when it should probably be defined in higher scope. Read these pages and see if they help you:

If they don't help, and this is an issue relevant to this library, please explain why and provide the full source code of the file so we can help. Thanks!

rodrigodiasf1984 commented 10 months ago

Hi,@taeh98 Thanks for your message, Yes, normally before opening any issue I do deep research about the problem, because opening an issue takes a lot of time and in some cases, we don't have any feedback(I understand this point, its free and people do this in free time normally).

I've managed to fix it, this is the solution if anyone needs it.


    'house-building': <GarageIcon height={25} width={25} />,
    'public-parking': (
      <View className="bg-blue-500 rounded-md w-5 h-5 items-center justify-center">
        <Text className="text-white font-rubik_bold text-sm">P</Text>
      </View>
    ),
    'private-parking': (
      <Buildings size={25} color={colors['text_custom_gray']} weight="fill" />
    ),
    'office-building': (
      <Factory size={25} color={colors['text_custom_gray']} weight="fill" />
    ),
    'unnassigned-place': (
      <DotsNine size={25} color={colors['text_custom_gray']} />
    ),
  };

  const renderIcon = (iconName: string) =>
    iconMap[iconName] || <GarageIcon height={25} width={25} />;

  const memoizedIcon = useMemo(() => renderIcon, [dropDownValue]);

  const [dropDownItems, setDropDownItems] = useState<DropdownItem[]>([
    {
      label: 'Individual',
      value: 'house-building',
      icon: () => memoizedIcon('house-building'),
    },
    {
      label: 'Público',
      value: 'public-parking',
      icon: () => memoizedIcon('public-parking'),
    },
    {
      label: 'Edificio de viviendas',
      value: 'private-parking',
      icon: () => memoizedIcon('private-parking'),
    },
    {
      label: 'Edificio de oficinas',
      value: 'office-building',
      icon: () => memoizedIcon('office-building'),
    },
    {
      label: 'Plazas sin identificar',
      value: 'unnassigned-place',
      icon: () => memoizedIcon('unnassigned-place'),
    },
  ]); 

Please close this issue, Thanks for you're attention and help.

hossein-zare / react-native-dropdown-picker

How to fix icon error eslint ? #703