PlatformIconList Component not Rendering the Icons

React
1

Here is the error:

Uncaught Error: React.Children.only expected to receive a single React element child. at Object.onlyChild [as only]

And here is my code:

import {
	FaWindows,
	FaPlaystation,
	FaXbox,
	FaApple,
	FaLinux,
	FaAndroid,
} from "react-icons/fa";
import { MdPhoneIphone } from "react-icons/md";
import { SiNintendo } from "react-icons/si";
import { BsGlobe } from "react-icons/bs";
import { Platform } from "@/hooks/useGames";
import { HStack, Icon, Text } from "@chakra-ui/react";
import { IconType } from "react-icons";

interface Props {
	platforms: Platform[];
}
// TODO: Figure out why Icons is not being mapped.
const PlatformIconList = ({ platforms }: Props) => {
	const iconMap: { [key: string]: IconType } = {
		pc: FaWindows,
		playstation: FaPlaystation,
		xbox: FaXbox,
		nintedo: SiNintendo,
		mac: FaApple,
		linux: FaLinux,
		andriod: FaAndroid,
		ios: MdPhoneIphone,
		web: BsGlobe,
	};
	return (
		<HStack>
			{platforms.map((platform) => (
				<Icon key={platform.id} as={iconMap[platform.slug]} />
				// <Text key={platform.id}>{platform.slug}</Text>
			))}
		</HStack>
	);
};

export default PlatformIconList;

The Text object works without a problem however, moving to the Icons seems to trigger an error that I am not experienced enough to understand it or figure out how to fix it.

Any ideas?

2

Had the same issue, i think it is because of chakra ui updated version of ‘Icon’ element. Try to make these changes:

return (
    <HStack marginY={1}>
      {platforms.map((platform) => {
        const IconComponent = iconMap[platform.slug];
        return <IconComponent key={platform.id} color="gray" />;
      })}
    </HStack>
  );

We’re directly rendering the IconComponent (from react-icons) without wrapping it in Chakra Icon. It looks a bit uglier but worked for me. Also pay attention that now colors from Chakra would not work on this element, that’s why i changed color from gray.500 to gray. Hope i could help

3

What version of react-icons are you using. It does not seem like the latest version has a component called IconComponent.

4

IconComponent is not from react-icons library, earlier we created an object iconMap which contains an array of type IconType that comes from react-icons. While mapping platforms we create a variable IconComponent and pass iconMap[platform.slug]: IconType as a value. IconType is a JSX element as documentation says, so we can use IconComponent as a JSX element now. I found that solution mostly with the help of ChatGPT, maybe it can be cleaner and simpler but after few hours of trying it was the best i could do.