0
228
VistasDar un icono a los elementos de matriz dinámica en reaccionar
Tengo un número dinámico de matrices como [1,2,3,5,7] , [1,2,3] , [2,7,8] ... donde los elementos representan una identificación de plataforma que ayuda a identificar plataformas como PlayStation, Xbox, etc. únicamente...
Quiero vincular un ícono de reacción a cada elemento de la matriz de modo que cada símbolo se vincule a la identificación de la plataforma que representa, por ejemplo: si la identificación de la plataforma de playstation es 2 , quiero que <FaPlaystation/> vinculado a él, así que puedo mostrarlo en mi componente de tarjeta de reacción, básicamente algo como esto:
¿Cómo implemento esto en reaccionar? Obtengo identificadores de plataforma a través de un accesorio llamado plat, al iterarlo de esta manera:
let platMain = plat.map(plat=>plat.platform.id);obtengo la matriz de identificaciones
3 Respuestas
Responde la pregunta0
Puede crear un mapa (que no debe confundirse con Array.prototype.map() ) para usarlo más tarde para buscar el componente de icono asociado mediante la clave numérica proporcionada.
import { FaAndroid, FaAngular, FaReact, FaDev } from "react-icons/fa"; const map1 = new Map([ [1, FaAndroid], [2, FaAngular], [3, FaReact], [4, FaDev] ]); const platMain = [2, 3, 4, 5, 6, 7]; export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> {platMain.map((key) => { const icon = map1.get(key); return icon ? icon() : null; })} </div> ); } 
O similar con un Objeto simple y antiguo con teclas numéricas.
import { FaAndroid, FaAngular, FaReact, FaDev } from "react-icons/fa"; const map = { 1: FaAndroid, 2: FaAngular, 3: FaReact, 4: FaDev }; const platMain = [2, 3, 4, 5, 6, 7]; export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> {platMain.map((key) => { const icon = map[key]; return icon ? icon() : null; })} </div> ); }
0
Puedes hacer esto
// utility to get Icon const getPlatformIcon = (platformId) => { switch (platformId) { case 1: return <FaIconName /> case 2: return <FaPlaystation/> case 3: return <FaAnotherIconName /> default: return <FaDefaultIcon /> // or return null if you don't have it } } // your component export default function({plat}) { return ( <div> { plat.map(p => getPlatformIcon(p.platform.id)) } </div> ) }0
Creo que este método sería mejor:
const yourArray = [ {id: 2, icon: <FaPlaystation /> }, {id: 4, icon: <AnotherIcon />}, {id: 6, icon: <AnotherIcon />} ] //then {yourArray.map((item)=>( <div> <p>item.id</p> {item.icon} </div> ))}