Necesito cambiar accesorios (color, tamaño) para muchos íconos en la matriz (y uso mu v4):
const ICONS_ARRAY: React.ReactNode[] = [ <AlertCircleCheckOutline />, <AppleSafari />, <MotionPlay />, <AppleKeyboardCommand />, <FileDocumentMultipleOutline />, <ClipboardArrowLeftOutline />, <ViewDashboardOutline />, <CalendarClockOutline />, <RobotHappyOutline />, <AccountWrenchOutline />, <AccountGroupOutline />, <AccountCogOutline />, <RunFast />, <SpeedometerSlow />]Intento esto (i - ícono de índice en la matriz):
<MenuItem> <Box> <SvgIcon fontSize={'small'}>ICONS_ARRAY[i]</SvgIcon> </Box> </MenuItem>,Pero el icono no se renderiza. Si cambio ICONS_ARRAY[i] en el elemento, funciona así:
<MenuItem> <Box> <SvgIcon fontSize={'small'}><RunFast /></SvgIcon> </Box> </MenuItem>También pruebo React.cloneElement, pero funciona igual.
Entonces, ¿tiene alguna idea de cuál podría ser el problema y cuál es la solución?
Voy a decir algo pequeño, pero solo para despedir.
¿Has probado a añadir corchetes "{}"?
algo como esto...
<MenuItem> <Box> <SvgIcon fontSize={'small'}>{ICONS_ARRAY[i]}</SvgIcon> </Box> </MenuItem>O prueba esto
{ICONS_ARRAY.map((icon) => ( <MenuItem> <SvgIcon fontSize={"small"}>{icon}</SvgIcon> </MenuItem> ))}