Estoy creando una aplicación de reacción que enumera juegos de una API de terceros . Este es mi componente de tarjeta.

En lugar de los nombres textuales de las plataformas, quiero mostrar íconos de dichas plataformas, para lo cual estoy usando react-icons . ¿Cómo puedo asignar dinámicamente los nombres de las plataformas a un icono? Esto es lo que estoy pasando en el plat prop:

Estoy pasando los valores al componente de mi tarjeta a través de accesorios:

 <SearchRes key={game.name} title={game.name} rating={game.metacritic} genre={game.genres.map(genre=>genre.name+" ")} imglnk={(game.background_image===null)?"":game.background_image} gameid={game.id} slug={game.slug} plat={game.parent_platforms} />

Probé esto, pero la pregunta es cómo puedo usarlo dinámicamente, ya que cada juego tendrá diferentes conjuntos de plataformas:

 <p>{platform.map(icon=>icon.platform.id===4?<FaWindows key="1"/>:null)}</p>

(utilicé este fragmento cuando pasé toda la matriz de la plataforma en prop)

Editar: probé el mapa hash implementando esto:

 const iconMap = { 1: <FaWindows key="1"/>, 2: <FaPlaystation key="2"/>, 3: <FaXbox key="3"/>, 4: <FaAppStoreIos key="4"/>, 5: <FaApple key="5"/>, 6: <FaLinux key="6"/>, 7: <SiNintendoswitch key="7"/>, 8: <FaAndroid key="8"/> } const icon = iconMap[plat.platform.id] || null;

pero recibo este error: TypeError: Cannot read properties of undefined (reading 'id')