Tengo una lista de categorías que provienen de una llamada API:
Diagnosis Client Statements Damages Necesito asignar un ícono en la interfaz a cada una de las categorías recibidas y pensé que la mejor manera de hacerlo era mapear las categorías usando una declaración de switch .
let icon = ''; const handleIcon = () => { categories.map((cat) => { switch (cat.categoryName) { case 'Diagnosis': icon = 'checklist-24'; break; case 'Client Statements': icon = 'document-24'; break; case 'Damages': icon = 'car-crash-24' break; default: break; } }); };Mi problema es que todas las categorías terminan siendo el último ícono porque al final todas son verdaderas para mi función de mapa.
categories.map((cat) => { <div>{icon}</div> <div>{cat.categoryName}</div> })¿Cómo puedo asignar un icono diferente según el nombre de la categoría en mi mapa?
Gracias.
Esta es la forma correcta de manejar este tipo de escenarios, es decir, cuando tiene que realizar manipulaciones adicionales en sus datos antes de mostrarlos:
const cats = [ { categoryName: 'Diagnosis' }, { categoryName: 'Client Statements' }, { categoryName: 'Damages' }, ]; export default function App() { const [categories, setCategories] = useState(cats); const _categories = useMemo(() => { return categories.map((cat) => ({ ...cat, icon: getIcon(cat.categoryName), })); }, [categories]); return ( <div> {_categories.map((cat) => ( <div> {cat.categoryName}:{cat.icon} </div> ))} </div> ); } function getIcon(name) { switch (name) { case 'Diagnosis': return 'checklist-24'; case 'Client Statements': return 'document-24'; case 'Damages': return 'car-crash-24'; default: return ''; } }De esta manera, está memorizando su manipulación, que de todos modos es costosa y no quiere que suceda en cada renderizado si las categorías no cambian, y usa una función pura getIcon() para adjuntar el icono relativo a su objeto de categoría. Puede adjuntar lo que quiera, incluso un componente JSX para que se muestre directamente.
Pruébalo AQUÍ